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数组排序函数sort()介绍
Jun 08 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
webpack3之loader全解析
Oct 26 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
简单实现JS上传图片预览功能
2017/04/14 Javascript
layui导航栏实现代码
2017/05/19 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python设计模式之抽象工厂模式
2016/08/25 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python爬虫请求头的使用
2020/12/01 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
高中校园广播稿
2014/01/11 职场文书
银行领导证婚词
2014/01/11 职场文书
人事任命书怎么写
2014/06/05 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技