文档章节

小抽奖

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
粉丝 8
博文 123
码字总数 82594
作品 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
抽奖转盘如何控制同时抽奖时的中奖问题

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

钱钱磊
2013/06/03
3.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——命令模式

参考博客 1. 认识命令模式 1. 定义:将一个请求封装成为一个对象,从而可以用不同的请求对客户进行参数化,对请求排队或记录请求日志,并支持可撤销操作。 2. 组织结构: Commond:定义命令的...

江左煤郎
15分钟前
0
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
6
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
0
0
Coding and Paper Letter(四十)

资源整理。 1 Coding: 1.Tomislav Hengl撰写的非官方作者指南:Michael Gould•Wouter Gerritsma。 UnofficialGuide4Authors 2.R语言包rwrfhydro,社区贡献的工具箱,用于管理,分析和可视化...

胖胖雕
昨天
0
0
JAVA 内存回收

参考:https://www.cnblogs.com/leesf456/p/5218594.html 1,JMV 中哪些可以作为 GC Root? 1. 虚拟机栈(栈帧中的局部变量区,也叫做局部变量表)中引用的对象。 2. 方法区中的类静态属性引...

Carlyle_Lee
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部