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

<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. JWT 多网站单点登录，放弃session

    多个网站之间的登录信息共享, 基于cookie - session的登录认证方式跨域等比较复杂.采用基于算法的认证方式, JWT(json web token)的方式. --------------- ...

  2. git clone出现SSL错误

    在学习git的时候,发现不能使用git clone从github.com下载,报了个ssl错误. Cloning into cancan... error: SSL certificate probl ...

  3. 用两个栈实现队列，剑指offer P59

    public class QueueByStack { private Stack<Integer> stack1; private Stack<Integer> stack2 ...

  4. swift 图像的压缩上传

    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [Str ...

  5. Eclipse开发中GlassFish 4 重启页面不刷新

    现在项目开发用GlassFish4做服务器,测试了几个web项目出现问题,每次编辑源代码后页面不能按照最新编辑好的代码显示. 一次重新运行web项目在服务器上看到publish,点击后运行的是新编辑的 ...

  6. linux中ssh登录Permanently added (RSA) to the list of known hosts问题解决

    文章出自http://www.2cto.com/os/201307/227199.html linux中ssh登录Permanently added (RSA) to the list of know ...

  7. ZZNU 1163: 在线判题（指针专题）

    题目描述 Ignatius is building an Online Judge, now he has worked out all the problems except the Judge S ...

  8. 关于Android L软件安装问题的发现

    android5.0可能存在的问题: 保留数据刷入导致通知栏无法下拉 按home键不能回到桌面 sdcard无法读取等等 刷了Android L之后,有一部分软件无法正常安装,多表现为 同一家公司开发 ...

  9. Java 向SQL Server插入文件数据

    package sqlserver; import java.util.Date; import java.util.UUID; import java.text.SimpleDateFormat; ...

  10. MySQL Replicationation基础

    摘要 一.MySQL Replication 介绍MySQL Replication的基本概念,摘自于Mysql官网 二.Replication Configuration 2.1 Basic Ste ...