文档章节

小抽奖

HJCui
 HJCui
发布于 2016/06/23 18:26
字数 368
阅读 37
收藏 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
粉丝 8
博文 121
码字总数 81858
作品 0
朝阳
程序员
开源中国马年献礼,Git@OSC 抽奖赢 iPad !

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

oschina
2014/01/02
7.2K
83
模拟一下人见人恨的“抽奖系统”

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

北风其凉
2014/05/23
0
3
【码云周刊第 59 期】你想要的年会抽奖开源项目都在这里!

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

码云Gitee
02/08
3
0
高朋网承认抽奖暗箱操作 辞退公司副总裁

【搜狐IT消息】5月11日,针对被疑暗箱操作微博抽奖活动一事,高朋网今日发表声明确认了内部员工以权谋私的事实,同时,高朋网宣布辞退对此事直接负责的公司副总裁。 高朋网方面称,“由于公司...

戴威
2011/05/11
2.6K
26
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular 解决其他电脑不能访问的问题。

ng serve --host 0.0.0.0 --disable-host-check

miaojiangmin
今天
1
0
优酷视频文件怎么转换格式

  以前在优酷上下载视频都只是在手机上观看,但随着科技的发展,对于视频的要求也逐渐增多,不再只是观看视频那么简单,在精彩的部分还会将其单独分割出来,然后进行视频剪辑,可以做出我们...

萤火的萤火
今天
0
0
数据结构:散列

在一个数据结构中查找key元素,用顺序查找、二分查找都需要经过一系列关键之比较才能查找到结果,平均查找长度与数据量有关,元素越多比较次数就越多。 如果根据元素的关键字就能知道元素的存...

京一
今天
1
0
Apache RocketMQ 正式开源分布式事务消息

近日,Apache RocketMQ 社区正式发布4.3版本。此次发布不仅包括提升性能,减少内存使用等原有特性增强,还修复了部分社区提出的若干问题,更重要的是该版本开源了社区最为关心的分布式事务消...

阿里云云栖社区
今天
32
0
使用JavaScript和MQTT开发物联网应用

如果说Java和C#哪个是最好的开发语言,无疑会挑起程序员之间的相互怒怼,那如果说JavaScript是动态性最好的语言,相信大家都不会有太大的争议。随着越来越多的硬件平台和开发板开始支持JavaS...

少年不搬砖老大徒伤悲
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部