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>

运行效果图：

初始状态：

开始之后：

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

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

赞 (0)

相关推荐

  • javascript获取四位数字或者字母的随机数

    本章节通过代码实例介绍一下如何实现简单的四位随机数功能. 比较简单的一种实现方式就是从数字和字母中随机抽取四个不重复的字符. 代码实例如下: function only(ele,arr){ if(arr.length==0){ return true; } for(var j=0;j<arr.length;j++){ if(ele==arr[j]){ return false; }else{ return true; } } } var arr=[0,1,2,3,4,5,6,"a"

  • JS简单生成两个数字之间随机数的方法

    JS简单生成两个数字之间随机数的方法

    本文实例讲述了JS简单生成两个数字之间随机数的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • JS设置随机出现2个数字的实例代码

    1和2 随机出现 <script type="text/javascript"> $(function(){ if (Math.random()>0.5) { console.log("1"); }else{ console.log("2"); } }); </script> PS:JS产生随机数的几个用法 <script> function GetRandomNum(Min,Max) { var Ran

  • Js 随机数产生6位数字

    复制代码 代码如下: <script type="text/javascript"> function MathRand() { var Num=""; for(var i=0;i<6;i++) { Num+=Math.floor(Math.random()*10); } document.getElementById("Lb_Random").innerText=Num; document.getElementById(&qu

  • 使用js Math.random()函数生成n到m间的随机数字

    摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10) 生成n-m,不包含n但包含m的整数:​ 第一步算出 m-n的值,假设等于w 第二步Math

  • 用jsp页面生成随机的验证数字码示例

    checkNum.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%> <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,javax.imageio.*"%>

  • js实现简易的单数字随机抽奖（0-9）

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

    本文分享的网页特效是一个可以控制开始停止的数字抽奖游戏,类似很多电视上那种数字抽奖游戏,下面就是我分享的全部代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简易的单数字随机抽奖,抽取随机数的js特效代码</title> <

  • js实现随机抽奖

    前言 在前端的开发当中,我们肯定会遇到随机抽奖的需求.我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果. 随机抽奖的JS代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap { text

  • 原生js实现简易抽奖系统

    原生js实现简易抽奖系统

    本文实例为大家分享了js实现简易抽奖系统的具体代码,供大家参考,具体内容如下 效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家画了个更直观的图 HTML结构与样式 <!doctype html> <html lang="en"> <head>     <meta charset="UT

  • JS实现随机抽奖小功能

    JS实现随机抽奖小功能

    本文实例为大家分享了JS实现随机抽奖小功能的具体代码,供大家参考,具体内容如下 点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取 <script>         var but1 = document.getElementById("btn1")         var but2 = document.getElementById("btn2")         var alldiv = document.querySelectorAl

  • js抽奖实现随机抽奖代码效果

    随机抽取,简单代码. 复制代码 代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q

  • 原生Js实现简易烟花爆炸效果的方法

    本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d

  • jquery输入数字随机抽奖特效的简单实现代码

    jquery输入数字随机抽奖特效的简单实现代码

    简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 我们</title><base target="_blank" /&g

  • javascript 随机抽奖程序代码

    随机抽奖程序 请单击开始抽奖 开始抽奖(S) 停止(O) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js鼠标点击图片实现随机变换图片的方法

    本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

  • 基于JavaScript实现简单的随机抽奖小程序

    对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效

随机推荐