js实现简易的单数字随机抽奖(0-9)

 更新时间:2020年03月19日 11:42:59   投稿:lijiao  
这篇文章主要介绍了js实现简易的单数字0-9随机抽奖,可以控制抽取随机数开始与停止,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文分享的网页特效是一个可以控制开始停止的数字抽奖游戏,类似很多电视上那种数字抽奖游戏,下面就是我分享的全部代码:

<!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>

运行效果图:

初始状态:

开始之后:

我现在展示的是运行中截的图,是静止的,大家可以动手操作,感受一下,会有一点点的成就感哦。

以上就是本文的全部内容,希望大家可以继续深入学习。

相关文章

  • JavaScript数据结构之二叉树的查找算法示例

    JavaScript数据结构之二叉树的查找算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的查找算法,结合具体实例形式分析了javascript针对二叉树节点最小值、最大值的相关查找操作实现技巧,需要的朋友可以参考下
    2017-04-04
  • javascript页面加载完执行事件代码

    javascript页面加载完执行事件代码

    本篇文章主要是对javascript页面加载完执行事件的代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 如何写出一个惊艳面试官的JavaScript深拷贝

    如何写出一个惊艳面试官的JavaScript深拷贝

    浅拷贝是面试中经常会被问到的问题,这篇文章主要给大家介绍了关于如何写出一个惊艳面试官的JavaScript深拷贝的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • JS 日期比较大小的简单实例

    JS 日期比较大小的简单实例

    本篇文章主要是对JS日期比较大小的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript延迟加载之async与defer的应用

    JavaScript延迟加载之async与defer的应用

    这篇文章主要介绍了JavaScript延迟加载之async与defer的应用场景与使用区别的介绍,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • js在Firefox与IE中对DOM对像的引用的比较

    js在Firefox与IE中对DOM对像的引用的比较

    直接用ID属性进行引用 直接用NAME属性进行引用 使用getElementById(),getElementsByName(),getElementsByTagName()进行引用
    2009-06-06
  • 详解JS: reduce方法实现 webpack多文件入口

    详解JS: reduce方法实现 webpack多文件入口

    本篇文章主要介绍了详解JS: reduce方法实现 webpack多文件入口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 小程序实现抽奖动画

    小程序实现抽奖动画

    这篇文章主要为大家详细介绍了小程序实现抽奖动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js正则表达式replace替换变量方法

    js正则表达式replace替换变量方法

    这篇文章主要介绍了js正则表达式/replace替换变量方法 ,最近项目任务繁重,更新博客会较慢,不过有时间希望可以把自己的积累分享出来,需要的朋友可以参考下
    2016-05-05
  • 详解JavaScript的内存空间、赋值和深浅拷贝

    详解JavaScript的内存空间、赋值和深浅拷贝

    这篇文章主要介绍了JavaScript的内存空间、赋值和深浅拷贝,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论