js实现简易的单数字随机抽奖(0-9)


Posted in Javascript onMarch 19, 2020

本文分享的网页特效是一个可以控制开始停止的数字抽奖游戏,类似很多电视上那种数字抽奖游戏,下面就是我分享的全部代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简易的单数字随机抽奖,抽取随机数的js特效代码</title>
</head>
<body>
<div id="num"></div>
<input value="start" id="start" type="button" />
<input value="stop" id="stop" type="button" />
<script>
var num = document.getElementById("num");
var start = document.getElementById("start");
var _stop = document.getElementById("stop");
var intv = null;
start.onclick = function(){
 
 if(intv==undefined){
 
 intv = setInterval(function(){num.innerHTML = Math.floor(Math.random()*10);},50);
 
 }
 
}
_stop.onclick = function(){
 
 clearInterval(intv);
 
 intv=null;
 
}
</script>
</body>
</html>

运行效果图:

初始状态:

js实现简易的单数字随机抽奖(0-9)

开始之后:

js实现简易的单数字随机抽奖(0-9)

我现在展示的是运行中截的图,是静止的,大家可以动手操作,感受一下,会有一点点的成就感哦。

以上就是本文的全部内容,希望大家可以继续深入学习。

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
微信小程序日历效果
Dec 29 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
基于Jquery实现表单验证
Jul 20 #Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
You might like
推荐文章系统(一)
2006/10/09 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
angular.element方法汇总
2015/01/07 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python抽取指定url页面的title方法
2018/05/11 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
下载官网python并安装的步骤详解
2019/10/12 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python Django路径配置实现过程解析
2020/11/05 Python
学校食品安全实施方案
2014/06/14 职场文书
幼儿园标语大全
2014/06/19 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
大学生见习报告范文
2014/11/03 职场文书
学雷锋感言
2015/08/03 职场文书