jquery输入数字随机抽奖特效

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

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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

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

效果图如下:
jquery输入数字随机抽奖特效

代码如下:

 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120372.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • office2016、office365和office其它版本JH[通俗易懂]

    office2016、office365和office其它版本JH[通俗易懂]Win10系统中会预安装Office,但是没有给JH,网上给了各种解决方案,如JH码、KMS等方式JH。但是效果差强人意。但是网上有一些大牛写的方法倒是立竿见影,下面分享给大家:CSDN现在被网安查的我都不敢修改了,自己原创被搞得涉及版权问题,文章中还不能有pojie和jihuoOJBK我将在JH中间遇到的问题,都罗列在这篇文章里了,也很感谢提出问题的C友们,此处我特别强调一下…

  • mongoshake实现mongodb数据同步

    mongoshake实现mongodb数据同步mongoshake实现mongodb数据同步

  • 源码网_python 源代码

    源码网_python 源代码源码结构目录可以看到此模块定义了4个属性和12个函数,我们依次来讲解属性源码分析#匹配http://或https://absolute_http_url_regexp=re.compil

  • flume整合kafka

    flume整合kafka整合流程Flume发送数据到Kafka上主要是通过KafkaSink来实现的,主要步骤如下:1.启动Zookeeper和Kafka这里启动一个单节点的Kafka作为测试:#启动ZookeeperzkServer.shstart#启动kafkabin/kafka-server-start.shconfig/server.properties2.创建主题创建一个主题flume-kafka,之后Flume收集到的数据都会发到这个主题上:#…

  • Linux命令:traceroute命令(路由跟踪)

    Linux命令:traceroute命令(路由跟踪)traceroute是用来检测发出数据包的主机到目标主机之间所经过的网关数量的工具。traceroute的原理是试图以最小的TTL(存活时间)发出探测包来跟踪数据包到达目标主机所经过的网关,然后监听一个来自网关ICMP的应答。发送数据包的大小默认为38个字节。原理:程序利用增加存活时间(TTL)来实现其功能。每当数据包(3个数据包包括源地址,目的地址和包发出的时间标签)经过一个路由器,其存活时间就会

  • elasticsearch面试常问问题_面试题 谈谈你对加班的看法

    elasticsearch面试常问问题_面试题 谈谈你对加班的看法前言随着企业对近实时搜索的迫切需求,Elasticsearch受到越来越多的关注,无论是阿里、腾讯、京东等互联网企业,还是平安、顺丰等传统企业都对Elasticsearch有广泛的使用,但是在Elasticsearch6.8发布以前,大部分Elasticsearch功能都是付费的,开源版本的Elasticsearch在集群管控方面能力有限,鉴于此,通用的实施方案就是给Elasticsearch添加一层网关,从而实现对Elasticsearch的管控。全套Java面试资料白嫖:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号