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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
vue使用video插件vue-video-player详解
Oct 23 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版(2)
2006/10/09 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
浅谈javascript原型链与继承
2015/07/13 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python中pass语句用法实例分析
2015/04/30 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python开发之list操作实例分析
2016/02/22 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
总会计师岗位职责
2014/02/19 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
家长会欢迎词
2015/01/23 职场文书
总经理岗位职责范本
2015/04/01 职场文书
离婚纠纷代理词
2015/05/23 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
关于python类SortedList详解
2021/09/04 Python