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

<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. php 分析

    php  code in D:\10\11\php test in D:\10\11\php\test issue 1: <html><head><title>标记 ...

  2. HDU 1847 Good Luck in CET-4 Everybody! 博弈

    题目思路: 写出SG函数(1表示先手胜,0表示先手负) 110110110110-- 发现n%3==0时,Cici胜 #include<stdio.h> #include<strin ...

  3. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  4. log4j2

    转载自 Blog of 天外的星星: http://www.cnblogs.com/leo-lsw/p/log4j2tutorial.html Log4j 2的好处就不和大家说了,如果你搜了2,说明你 ...

  5. Gulp构建

    整理自 https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ 已经有package.json 第 ...

  6. win7远程连接ubuntu14.04.1桌面

    sudo apt-get install xdrp sudo apt-get install vnc4server tightserver sudo apt-get install xfce4 ech ...

  7. iframe标签flash遮盖页面元素问题——wmode参数

    最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...

  8. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  9. Zend Studio 无法打开的解决办法

    今天郁闷的...正在写代码,突然 computer 嗝屁了,断电后自动重启了一次,开机后就悲剧了,Zend Studio 9 无法打开了,每次运行只弹窗个 请查看项目错误日志的提示 然后就没反应了.. ...

  10. win32api大全

    win32api大全 http://files.cnblogs.com/files/landv/Win32API%E5%A4%A7%E5%85%A8.zip