文章目录

前言

一、页面结构

二、源码

1.choujiang.html

2.choujiang.js

三、效果展示

总结

前言

随着疫情政策的调整，再加上年关将至，失传已久的“年会”又回到了它以往出现的频率上，公司下下周要举行公司年会，年会重大项目，抽奖一直以来都是我很期待的项目，今天领导说要实现一个抽奖页面，下面是具体实现步骤，直接上代码。

一、页面结构

页面结构如下：

vue.js 有无均可，最近在学vue，就尝试用双向绑定来试试。

二、源码

1.choujiang.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="choujiang.js"></script><script src="vue.js"></script><title>Document</title>
</head>
<body><div id="qglt"><input type="text" id="maxnumber" placeholder="输入最大的数值"><p>{{content}}</p><input id="number1"><button onclick="start()">开始</button><button onclick="end()">结束</button><button onclick="Getlocal()">获取</button><button onclick="revert()">重新抽奖</button></div>
</body>
</html>

注意：p标签中的{{content}}是vue双向绑定时使用的，不想使用vue的直接删除即可。

2.choujiang.js

代码如下（示例）：

var set1;
var numbertime = 1000;
var originalArray = new Array();
var ins = 0;
//开始按钮
function start() {set1 = setInterval(c)}
//逻辑
function c() {if (ins == 0) {b();}document.getElementById("number1").value = originalArray[ins];Vue.content = originalArray[ins];if (ins >= originalArray.length - 1) {ins = 0;} else {ins++;}}
//数据输入的最大数字生成随机数组
function b() {var maxnumber = document.getElementById("maxnumber").value;var count = 3000;originalArray = new Array;//原数组//给原数组originalArray赋值for (var i = 0; i < maxnumber; i++) {originalArray[i] = i + 1;}var d1 = new Date().getTime();originalArray.sort(function () { return 0.5 - Math.random(); });for (var i = 0; i < maxnumber; i++) {//document.write(originalArray[i]+" , ");console.log(originalArray[i])}var d2 = new Date().getTime();//document.write("运算耗时"+(d2-d1));console.log("运算耗时" + (d2 - d1))numbertime = d2 - d1
}
//结束按钮
function end() {ins = 0;var getnumber = window.localStorage.getItem("getnumber");if (getnumber == null) {getnumber = Vue.content} else {getnumber = getnumber + " , " + Vue.content}console.log("------------------------")console.log(Vue.content)console.log("------------------------")clearInterval(set1);window.localStorage.setItem("getnumber",getnumber);
}
//获取中奖信息
function Getlocal() {console.log(window.localStorage.getItem("getnumber"))
}
var Vue;
window.onload = function () {Vue = new Vue({el: "#qglt",data() {return {content: ""}},//方法methods: {},})
}
//重新抽奖
function revert(){window.localStorage.setItem("getnumber",null);
}

注意：以下代码也是vue使用的不想使用直接注掉即可。

var Vue;
window.onload = function () {Vue = new Vue({el: "#qglt",data() {return {content: ""}},//方法methods: {},})
}

三、效果展示

实现抽奖效果展示

每次的抽奖结果存在浏览器的local　Storage中可以获取查看。

总结

以上就是今天要讲的内容。

100行代码实现数字滚动抽奖功能相关推荐

SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
C语言100行代码实现推箱子
1 C语言100行代码实现推箱子 1.1 概述 C语言是很好入门编程的一个语言,它拥有着很好的移植性,基本上所有的平台都支持C语言编程.有些C语言基础的你,是不是也很想做一个项目来检验一下自己的学习 ...
Android鬼点子 100行代码，搞定柱状图!
最近,项目中遇到一个地方,要用到柱状图.所以这篇文章主要讲怎么搞一个柱子. 100行代码,搞定柱状图! 我的印象中柱子是这样的. 恩,简单,一个View直接放到xml,搞定! 但,设计师给的柱子是这样 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
WebServer应用示例：不到100行代码玩转Siri语音控制 | ESP32轻松学（Arduino版）
ESP32轻松学系列文章目录: ESP32 概述与 Arduino 软件准备蓝牙翻页笔(PPT 控制器) B 站粉丝计数器 Siri 语音识别控制 LED 灯 Siri 语音识别获取传感器数据本期 ...
100行代码实现最简单的基于FFMPEG+SDL的视频播放器（SDL1.x）
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
100行代码教你教务系统自动抢课！
帮助广大学生解决抢课问题!自动抢课!! 100行代码帮你实现抢课! 本项目使用了python中splinter的API接口用来操作页面交互,用了twilio用来给手机发送短信通知抢课成功. 欢 ...
开源自制的6通道航模遥控器(一) 超简单不超过100行代码
前言前段时间跟着LOLI大神的教程制作了LOLI三代控,效果很好.但是,由于LOLI三代控的接收机带有数据回传功能,也就是接收机的无线模块也承担了发射数据功能,所以接收机也要使用带有功率放大芯片的N ...
用Arduino玩转掌控板(ESP32)：不到100行代码实现Siri语音控制 → WebServer应用示例...
众所周知,掌控板在创客教育中用的非常广泛,它是一块基于 ESP32 的学习开发板.大家对掌控板编程,用的比较多的都是图形化编程的方式,比如 mPython.Mind+ 等.但是,既然掌控板是基于 ES ...

100行代码实现数字滚动抽奖功能

文章目录

前言

一、页面结构

二、源码

1.choujiang.html

2.choujiang.js

三、效果展示

100行代码实现数字滚动抽奖功能相关推荐

最新文章

热门文章