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 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 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
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
js确定对象类型方法
2012/03/30 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
详解python 爬取12306验证码
2019/05/10 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
实例详解Python模块decimal
2019/06/26 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
销售助理岗位职责
2014/02/21 职场文书
周年庆促销方案
2014/03/15 职场文书
入党积极分子个人总结
2015/03/02 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python