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

<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. sql-yog

    sqlyog及类似工具的使用 #建表 #索引 #联合索引 #前缀索引 #表注释 #sql语句

  2. drupal7 sql接口笔记

    1.查询: execute() ->fetch():从结果集中取出一行作为一个对象 execute() ->fetchField():获取单个值 execute() ->fetchA ...

  3. perl Mail::Sender模块发送邮件

    #!/usr/bin/perl -w use strict; use Mail::Sender; ; ){ my $sender = Mail::Sender->new({ smtp => ...

  4. Mac软件记录

    前端: Brackets,sourceTree,dreamweaver,ps,ai,softmatic Weblayers. phpStorm,pyCharm,IDEA,eaclipse,XCODE, ...

  5. SSH整合例子

    三大框架: Struts框架 1. params拦截器: 请求数据封装 2. 类型转换/数据处理 3. struts配置 4. 文件上传/下载/国际化处理 5. 数据效验/拦截器 6. Ognl表达式 ...

  6. Java中获取当前日期

    java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...

  7. String类使用方法

    1.1.字节与字符串相互转换 |-字节-->String:public String(byte[]  bytes)        |-String-->字节: public byte[] ...

  8. UML类图几种关系总结

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  9. cocos2d-lua ARPG手机游戏《烈焰遮天》（客户端+服务端+数据库）发布说明

    服务器发布流程及其规范1,环境准备        a, mvn命令行:从\\10.21.210.161\share\tools\apache-maven-3.1.1-bin.tar.gz取出安装包,  ...

  10. 第六十二节，html分组元素

    html分组元素 学习要点:     1.分组元素总汇     2.分组元素解析     本章主要探讨HTML5中分组元素的用法.所谓分组,就是用来组织相关内容的HTML5元素,清晰有效的进行归类. ...