文档章节

小抽奖

HJCui
 HJCui
发布于 2016/06/23 18:26
字数 368
阅读 38
收藏 3

一、

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="Content-Language" content="zh-CN"/>
  <title>抽奖</title>
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    body {text-align:center;padding-top:50px;}
    #Result {border:3px solid #40AA53;margin:0 auto;text-align:center;width:400px;padding:50px 0;background:#efe;}
    #ResultNum {font-size:50pt;font-family:Verdana}
    #Button {margin:50px 0 0 0;}
    #Button input {font-size:40px;padding:0 50px;}
  </style>
  <script type='text/javascript'>
  <!--
  var g_Interval = 10;
  var g_PersonCount = 100;//参加抽奖人数
  var g_Timer;
  var running = false;
  function beginRndNum(trigger){
    if(running){
        running = false;
        clearTimeout(g_Timer);      
        $(trigger).val("开始");
        $('#ResultNum').css('color','red');
    }
    else{
        running = true;
        $('#ResultNum').css('color','black');
        $(trigger).val("停止");
        beginTimer();
    }
  }
   
  function updateRndNum(){
    var num = Math.floor(Math.random()*g_PersonCount+1);
    $('#ResultNum').html(num);
  }
   
  function beginTimer(){
    g_Timer = setTimeout(beat, g_Interval);
  }
 
  function beat() {
    g_Timer = setTimeout(beat, g_Interval);
    updateRndNum();
  }
  //-->
  </script>
</head>
<body>
<h1>抽奖结果</h1>
<div id="Result">
    <span id="ResultNum">0</span>
</div>
<div id="Button">
<input type='button' value='开始' onclick='beginRndNum(this)'/>
</div>
</body>
</html>

二、setInterval () 更简洁

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="Content-Language" content="zh-CN"/>
  <title>抽奖</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    body {text-align:center;padding-top:50px;}
    #Result {border:3px solid #40AA53;margin:0 auto;text-align:center;width:400px;padding:50px 0;background:#efe;}
    #ResultNum {font-size:50pt;font-family:Verdana}
    #Button {margin:50px 0 0 0;}
    #Button input {font-size:40px;padding:0 50px;}
  </style>
  <script type='text/javascript'>
  var g_Interval = 10;
  var g_PersonCount = 100;//参加抽奖人数
  var g_Timer;
  var running = false;
  function beginRndNum(trigger){
    if(running){
        running = false;
        clearInterval(g_Timer);    
        $(trigger).val("开始");
        $('#ResultNum').css('color','red');
    }else{
        running = true;
        $('#ResultNum').css('color','black');
        $(trigger).val("停止");
        g_Timer = setInterval(updateRndNum, g_Interval);   
    }
  }
   
  function updateRndNum(){
    var num = Math.floor(Math.random()*g_PersonCount+1);
    $('#ResultNum').html(num);
  }
  </script>
</head>
<body>
<h1>抽奖结果</h1>
<div id="Result">
    <span id="ResultNum">0</span>
</div>
<div id="Button">
<input type='button' value='开始' onclick='beginRndNum(this)'/>
</div>
</body>
</html>

 

本文转载自:

HJCui
粉丝 9
博文 123
码字总数 82594
作品 0
朝阳
程序员
私信 提问
开源中国马年献礼,Git@OSC 抽奖赢 iPad !

新年伊始,万象更新,为回馈过去一年里,众网友对开源中国的支持,推出轮盘抽奖活动。 具体活动规则如下: Git@OSC的用户由下面列出的获取抽奖机会规则抽奖 获取抽奖机会规则: 每天登陆,并打...

丫头潘潘
2014/01/04
10.1K
31
开源中国马年献礼,Git@OSC 抽奖赢 iPad !

新年伊始,万象更新,为回馈过去一年里,众网友对开源中国的支持,推出轮盘抽奖活动。 具体活动规则如下: Git@OSC的用户由下面列出的获取抽奖机会规则抽奖 获取抽奖机会规则: 每天登陆,并打...

oschina
2014/01/02
7.3K
83
【码云周刊第 59 期】你想要的年会抽奖开源项目都在这里!

码云项目推荐 抽奖软件是年会、活动及大型展会的必备软件之一,用于抽取奖励、调节活动气氛。不过小编最近不开森,因为年会抽奖居然连个安慰奖都没有被抽到!下次公司年会进行策划,我要自己...

码云Gitee
02/08
3
0
模拟一下人见人恨的“抽奖系统”

1.关于本文 本文旨在模拟一种非常坑爹的抽奖形式-不等概率的抽奖(当然,这种抽奖形式在现在已经得到了非常普遍的应用) 程序下载地址:http://pan.baidu.com/s/1hETHk 2.抽奖系统抽奖规则 ...

北风其凉
2014/05/23
0
3
抽奖转盘如何控制同时抽奖时的中奖问题

抽奖转盘如何控制同时抽奖中奖,奖品数量是从数据库读的,同时抽奖有可能造成中奖数量超出的问题,主要是因为前一个人抽奖的时候,抽到了,还没往数据库插入数据,后面一个人查到奖品还有,然...

钱钱磊
2013/06/03
3.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap源码解析

初始化 先看看ConcurrentHashMap中几个重要的属性: // 初始化容量大小static final int DEFAULT_INITIAL_CAPACITY = 16;//默认负载因子static final float DEFAULT_LOAD_FACTOR = 0.75f...

grace_233
12分钟前
0
0
java对象的浅拷贝和深拷贝

浅拷贝 java的数据类型有基本数据类型(如:int、long等)和引用数据类型。例如:对象1中有属性a(基本数据类型)和属性b(引用数据类型),在进行浅拷贝到对象2时,属性a复制属性的值给对象...

yangyangyyyy
12分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云云栖社区
13分钟前
0
0
ubuntu16.04 LNMP搭建 php7.1

sudo apt-get update sudo apt-get install mysql-server mysql-client sudo apt-add-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.1 php7.1-fpm php7.1-cgi p......

一千零一夜个为什么
20分钟前
0
0
阿里云高级技术专家带你全面了解云主机性能评测

钱超,花名西邪,阿里云高级技术专家,超12年老阿里,是云主机性能领域的知名专家。 在目前的云计算测评领域,很多性能测评存在营销的包装,容易引起误导:比如用瞬时性能引导读者得出结论,...

阿里云官方博客
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部