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脚本 Node.js 使用入门
Mar 07 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
ini_set的用法介绍
2014/01/07 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
学生就业推荐信
2013/11/13 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2015年库房工作总结
2015/04/30 职场文书
写给老师的保证书
2015/05/09 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis