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

随着疫情政策的调整，再加上年关将至，失传已久的“年会”又回到了它以往出现的频率上，公司下下周要举行公司年会，年会重大项目，抽奖一直以来都是我很期待的项目，今天领导说要实现一个抽奖页面，下面是具体实现步骤，直接上代码。一、页面结构页面结构如下：vue.js 有无均可，最近在学vue，就尝试用双向绑定来试试。

Mr.乐图

2881人浏览 · 2023-01-10 17:36:46

Mr.乐图 · 2023-01-10 17:36:46 发布

文章目录

前言

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

一、页面结构

页面结构如下：

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中可以获取查看。

总结

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^