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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jquery 学习笔记一
2010/04/07 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python保存网页图片到本地的方法
2018/07/24 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
高中生家长寄语大全
2014/04/03 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
安全生产标语大全
2014/10/06 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
九年级语文教学反思
2016/03/03 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Redis 常见使用场景
2021/08/30 Redis