小抽奖
博客专区 > HJCui 的博客 > 博客详情
小抽奖
HJCui 发表于1年前
小抽奖
  • 发表于 1年前
  • 阅读 32
  • 收藏 3
  • 点赞 0
  • 评论 0
摘要: 小抽奖

一、

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

 

共有 人打赏支持
粉丝 6
博文 88
码字总数 73728
×
HJCui
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: