zoukankan      html  css  js  c++  java
  • jquery输入数字随机抽奖特效

    简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果。

    效果展示 http://hovertree.com/texiao/jquery/76/

    效果图如下:


    代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" />
     6 
     7     <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>
     8     <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script>
     9     <style type="text/css">
    10         #bigDiv {
    11             width: 1080px;
    12             margin: 0px auto; /*div网页居中*/
    13             background-color: #494949;
    14             color: #FFFFFF;
    15         }
    16 
    17         h1 {
    18             text-align: center; /*文本居中*/
    19             padding-top: 10px;
    20         }
    21 
    22         #first, #second, #third {
    23             width: 360px;
    24             height: 360px;
    25             font-size: 150px;
    26             line-height: 360px;
    27             text-align: center;
    28             float: left; /*让三个盒子左浮动*/
    29         }
    30 
    31         #first {
    32             background-color: #009BFF;
    33             opacity: 0.9;
    34         }
    35 
    36         #second {
    37             background-color: #007CCC;
    38         }
    39 
    40         #third {
    41             background-color: #005388;
    42         }
    43 
    44         input {
    45             font-size: 30px;
    46             font-weight: 900;
    47         }
    48 
    49         #start {
    50             margin-left: 40%;
    51             margin-right: 5%;
    52         }a{color:blue;}
    53     </style>
    54 
    55 </head>
    56 <body>
    57     <div id="bigDiv">
    58         <h1>玩家幸运抽奖活动</h1>
    59         <div id="first"></div>
    60         <div id="second"></div>
    61         <div id="third"></div>
    62         <input type="button" value="开始" id="start">
    63         <input type="button" value="停止" id="stop" disabled="disabled">
    64     </div>
    65 
    66     <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    67         <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
    68         <p>来源: <a href="http://hovertree.com">何问起</a>
    69 <a href="http://hovertree.com/texiao/">特效库</a>
    70 <a href="http://hovertree.com/h/bjaf/07a7l2on.htm">代码说明</a></p>
    71     </div>
    72 </body>
    73 </html>

    js文件代码如下:

     1 /**
     2  * Created by 何问起 午后的阳光 on 2016/5/14.
     3  */
     4 var ran = 0;
     5 var range = 0;
     6 var myNumber;
     7 /*将产生随机数的方法进行封装*/
     8 function sjs(range) {
     9     ran = Math.random() * range;//[0,range)的随机数
    10     var result = parseInt(ran);//将数字转换成整数
    11     return result;
    12 }
    13 /*对显示随机数的方法进行封装*/
    14 function showRandomNum() {
    15     var figure = sjs(range);
    16     $("#first").html(figure);
    17     var figure2 = sjs(range);
    18     $("#second").html(figure2);
    19     var figure3 = sjs(range);
    20     $("#third").html(figure3);
    21 }
    22 $(function () {
    23     /*点击开始按钮,产生的事件*/
    24     $("#start").click(function () {
    25         
    26         range = prompt("请输入随机数范围:", "168");
    27 
    28         if (range == null)//http://hovertree.com/h/bjaf/3siyd3x7.htm
    29         {
    30             return; 
    31         }
    32 
    33         if (range == 0)
    34         {
    35             return;
    36         }
    37 
    38         if (isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm
    39         {
    40             alert("请输入数字");
    41             return ;
    42         }
    43         /*将开始标签禁用,停止标签启用*/
    44         $("#start")[0].disabled = true;
    45         $("#stop")[0].disabled = false;
    46         if (range > 9999 || range<-999)
    47         {
    48             // by 何问起
    49             $("#bigDiv div").css("font-size", "60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm
    50             //return;
    51         }
    52         myNumber = setInterval(showRandomNum, 50);//多长时间运行一次,单位毫秒
    53     });
    54     /*点击结束按钮*/
    55     $("#stop").click(function () {
    56         /*将开始标签启用,停止标签禁用*/
    57         $("#start")[0].disabled = false;
    58         $("#stop")[0].disabled = true;
    59         clearInterval(myNumber);
    60     });
    61 });

    转自:http://hovertree.com/h/bjaf/07a7l2on.htm

    更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    后端MVC与前端MVVM的区别
    解析身份证号
    awk的执行方式
    案例九:shell脚本自动创建多个新用户,并设置密码
    一键配置tomcat定期日志清理功能
    date命令
    将dict.define转化成dict.txt
    FastDFS 配置 Nginx 模块及访问测试
    nohup命令的用法
    手把手教你如何玩转消息中间件(ActiveMQ)
  • 原文地址:https://www.cnblogs.com/roucheng/p/jquerysuiji.html
Copyright © 2011-2022 走看看