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>

运行效果图:

初始状态:

开始之后:

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

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

相关文章

  • js+css实现全屏侧边栏

    js+css实现全屏侧边栏

    这篇文章主要为大家详细介绍了js+css全屏侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 分析JavaScript数组操作难点

    分析JavaScript数组操作难点

    本篇文章通过例举代码分析的方式给大家讲解了JavaScript数组操作难点以及需要注意的地方,一起学习参考下吧。
    2017-12-12
  • 微信小程序新手教程之页面打开数量限制

    微信小程序新手教程之页面打开数量限制

    这篇文章主要给大家介绍了关于微信小程序新手教程之页面打开数量限制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js数组的操作详解

    js数组的操作详解

    用js有很久了,但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。对于字符的处理很多情况下需要用到数组
    2013-03-03
  • css transform 3D幻灯片特效实现步骤解读

    css transform 3D幻灯片特效实现步骤解读

    3D幻灯片特效想必大家以不在陌生至于表现形式一般都是拘泥于传统接下来为大家介绍下使用css3 transform配合js以及html实现3D幻灯片特效
    2013-03-03
  • Webpack4.x的四个核心概念介绍

    Webpack4.x的四个核心概念介绍

    这篇文章介绍了Webpack4.x的四个核心概念介绍,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 小程序安全指南之如何禁止外部直接跳转到小程序某页面

    小程序安全指南之如何禁止外部直接跳转到小程序某页面

    由于小程序跳转的对象比较多,各自的规则又不一样,因此小程序跳转外部链接是用户咨询较多的问题之一,下面这篇文章主要给大家介绍了关于小程序安全指南之如何禁止外部直接跳转到小程序某页面的相关资料,需要的朋友可以参考下
    2022-09-09
  • 关于同时使用swiper和echarts遇到的问题及解决方法

    关于同时使用swiper和echarts遇到的问题及解决方法

    这篇文章主要介绍了关于同时使用swiper和echarts遇到的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • OpenLayer学习之自定义测量控件

    OpenLayer学习之自定义测量控件

    这篇文章主要为大家详细 介绍了OpenLayer学习之自定义测量控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 禁用页面部分JavaScript不是全部而是部分

    禁用页面部分JavaScript不是全部而是部分

    全部限制那是很简单的事,直接把<script>脚本块过滤掉就行了,但是部分限制又是如何做到的呢,下面我们一起来看看
    2014-09-09

最新评论