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 instanceof 与typeof使用说明
Jan 11 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2015公司年度工作总结
2015/05/14 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书