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 复制或插入Html的实现方法小结
May 19 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
JavaScript实现tab栏切换效果
Mar 16 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
妇科医生自荐信
2013/11/05 职场文书
《赶海》教学反思
2014/04/20 职场文书
少先队活动总结
2014/08/29 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2015年妇产科工作总结
2015/05/18 职场文书