————————————————————————————————

<script type="text/javascript">
            var data = "李XX,王XX,刘XX,胡XX,罗XX,杨XX,徐XX,周XX"; //抽奖数据，以逗号分隔
            var arr = data.split(",") ;    //分拆抽奖的数据为数组
            var timer = null;            //定时器变量            
            function start(){             //开始抽奖函数
                if(!timer){                //是否已经有定时器开始了
                    //创建定时器
                    timer = setInterval(function change(){
                        var max = arr.length - 1;    //最大的下标数字
                        var rand = Math.random();    //随机数，小于0
                        var randIndex = parseInt(rand * max);//得到整型数据
                        //文本区域的DOM
                        var d = document.getElementById("demo");
                        d.innerHTML = arr[randIndex]; //跳动的字符
                    } ,50); //50毫秒的间隔，如果想更快，把数字变小
                }
            }
            function stop(){             //停止按钮
                clearInterval(timer);     //清除定时器
                timer = null;            //变量置空
                //获取输入框和demo的DOM
                var r = document.getElementById("rst");
                var d = document.getElementById("demo");
                r.value = d.innerHTML;     //设置结果
            }
        </script>

——————————————————————————

<body>
        <div id="demo" name="demo">请单击开始抽奖</div>
        <button onclick="start()">开始抽奖</button>
        <button onclick="stop()">停止</button>
        <input type="text" id="rst" value="">
    </body>

——————————————————————

其他应用和技巧-用JS实现的抽奖程序的更多相关文章

  1. At.js – 用于 Web 应用程序的自动完成库

    At.js 是一个自动完成库,用来实现自动完成提示,表情等,就像你在 Github 或 Twitter 上看到的一样.它支持 HTML5 contentEditable 元素.你可以听任何字符,而不仅 ...

  2. 使用JS启动本地应用程序、屏幕键盘

    问题描述:     现在希望在Web端使用JS调用本地应用程序 问题解决:   (1)使用JS启动本地应用程序 使用上述代码重点是创建了一个ActiveXObject的对象     参考说明:     ...

  3. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  4. 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

    原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...

  5. Jlink使用技巧之读取STM32内部的程序

    前言 上一篇Jlink系列文章介绍了如何使用J-Flash来下载Hex或Bin文件到单片机,具体可参考Jlink使用技巧之单独下载HEX文件到单片机,本篇文章介绍,如何使用JFlash来读取单片机的程 ...

  6. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  7. Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序。。

    Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序.. 1. 引擎加脚本架构 跨平台,桌面与web的优势1 2. 架构桌面引擎(java,c#)2 3. php桌面引擎要点2 3. ...

  8. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  9. javascript实用技巧，js小知识

    一.js整数的操作 使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等效果的时候会很有用.性能比较见此. var foo = (1 ...

随机推荐

  1. 用 yo aspnet 生成.net项目

    yo指的是Yeoman 官网:http://yeoman.io/ 因为安装yo需要nmp 因此 要先到node官网下载node并按装 安装之后就可以下一步了 $ npm install -g yo g ...

  2. [Mark] KVM 虚拟化基本原理

    X86 操作系统是设计在直接运行在裸硬件设备上的,因此它们自动认为它们完全占有计算机硬件.x86 架构提供四个特权级别给操作系统和应用程序来访问硬件. Ring 是指 CPU 的运行级别,Ring 0 ...

  3. python学习之批量更改文件格式

    文件操作 import os, glob from PIL import Image path = 'D:/SBSR/view_1' imgslist = glob.glob(path+'/*.jpg ...

  4. Java代码之输出参数和（强制类型转换）

    说明(因为Java中java Application的参数都是默认的字符型的数据,所以需要强制类型转换这一步骤) 设计思想: 向系统里输入若干个参数,计算出参数个数,利用for语句计算出参数的和.(程 ...

  5. 关于微信端不支持window.location.reload()

    今天写了一个调查问卷页面,项目经理说要表单提交之后页面刷新,之间没沟通清楚,以为整个页面重载,所以刚开始就用了window.location.reload()的方法. 但是发现,在微信直接打开之后,居 ...

  6. Hibernate5--课程笔记5

    关联关系映射: 关联关系,是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系.实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键,即,使 ...

  7. Webpack学习笔记（二）

    市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合 ...

  8. 谷歌Dremel即时数据分析解决方案

    Hadoop技术已经无处不在.不管是好是坏,Hadoop已经成为大数据的代名词.短短几年间,Hadoop从一种边缘技术成为事实上的标准.看来,不仅现在Hadoop是企业大数据的标准,而且在未来,它的地 ...

  9. JavaScript的DOM（文档对象）基础语法总结2

    1.getAttribute()方法,通过元素节点的属性名称获取属性的值. //语法 elementNode.getAttribute(name) //element(元素);Node(节点) //注 ...

  10. Nginx 搭建反向代理服务器过程详解

    1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet ...