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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
node中的session的具体使用
Sep 14 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 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
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
理解javascript异步编程
2016/01/27 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python中random模块用法实例分析
2015/05/19 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
教师年终个人自我评价
2013/10/04 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python打包exe时各种异常处理方案总结
2021/05/18 Python