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创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
jQuery实现滚动效果
Nov 17 jQuery
写给小白看的JavaScript异步
Nov 29 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 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+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
jQuery事件用法详解
2016/10/06 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
node.js的Express服务器基本使用教程
2019/01/09 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python中encode()方法的使用简介
2015/05/18 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python处理中文标点符号大集合
2018/05/14 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
暑期实习鉴定
2013/12/16 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
认购协议书范本
2014/04/22 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
python pygame入门教程
2021/06/01 Python