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入门教程(9) Document文档对象
Jan 31 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php实例化一个类的具体方法
2019/09/19 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
vuex实现购物车功能
2020/06/28 Javascript
python中pygame模块用法实例
2014/10/09 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python一键升级所有pip package的方法
2017/01/16 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
如何写python的配置文件
2020/06/07 Python
python 实现逻辑回归
2020/12/30 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
九年级数学教学反思
2014/02/02 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
社区党员公开承诺书
2014/08/30 职场文书
支行行长竞聘报告
2014/11/06 职场文书
荒岛余生观后感
2015/06/09 职场文书
污染环境建议书
2015/09/14 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技