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长整型精度问题实例分析
Jan 13 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
微信小程序静默登录的实现代码
Jan 08 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
php 正则匹配函数体
2009/08/25 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
浅谈Python中的继承
2020/06/19 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
警察先进个人事迹材料
2014/05/16 职场文书
作风年建设汇报材料
2014/08/14 职场文书
金秋助学感谢信
2015/01/21 职场文书
质检员岗位职责
2015/02/03 职场文书
干部考核工作总结
2015/08/12 职场文书
python单元测试之pytest的使用
2021/06/07 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android