文档章节

小抽奖

HJCui
 HJCui
发布于 2016/06/23 18:26
字数 368
阅读 37
收藏 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>

 

© 著作权归作者所有

HJCui
粉丝 6
博文 109
码字总数 80137
作品 0
朝阳
程序员
开源中国马年献礼,Git@OSC 抽奖赢 iPad !

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

oschina ⋅ 2014/01/02 ⋅ 83

模拟一下人见人恨的“抽奖系统”

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

北风其凉 ⋅ 2014/05/23 ⋅ 3

【码云周刊第 59 期】你想要的年会抽奖开源项目都在这里!

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

码云Gitee ⋅ 02/08 ⋅ 0

高朋网承认抽奖暗箱操作 辞退公司副总裁

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

戴威 ⋅ 2011/05/11 ⋅ 26

幸运大转盘-jQuery+PHP实现的抽奖程序

目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的...

蜗牛奔跑 ⋅ 2015/07/06 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

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

透笔度 ⋅ 01/25 ⋅ 2

抽奖转盘如何控制同时抽奖时的中奖问题

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

钱钱磊 ⋅ 2013/06/03 ⋅ 3

透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度 ⋅ 01/26 ⋅ 0

开源JS抽奖程序

开源JS抽奖程序 (1)位置工具,用于模拟影院、活动现场的位置编号,对编号进行随机抽奖。 (2)可以导入txt、Excel、word数据,根据数据抽奖。 (3)可以配置奖品、名次、中奖率、中奖人数等...

Mooke ⋅ 2015/05/06 ⋅ 1

JavaScript 抽奖小应用 - Lottery.js

Lottery.js 一个简单的 JavaScript 抽奖应用,基于 Zepto 或 jQuery,快速便捷接入现有系统。 预览 LiveDemo -> 特性 灵活的使用方法 可定制的自定义信息 风趣的小特效 使用 准备一个参与抽奖...

孙亮 ⋅ 2017/10/12 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

金山WPS发布了Linux WPS Office

导读 近日,金山WPS发布了Linux WPS Office中文社区版新版本,支持大部分主流Linux系统,功能更加完善,兼容性、稳定性大幅度提升。本次更新WPS将首次在Linux提供专业办公文件云存储服务,实...

问题终结者 ⋅ 昨天 ⋅ 0

springboot2输出metrics到influxdb

序 本文主要研究一下如何将springboot2的metrics输出到influxdb maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

go4it ⋅ 昨天 ⋅ 0

微信小程序 - 选择图片显示操作菜单

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。 但是你从...

hello_hp ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部