jquery输入数字随机抽奖特效的简单实现代码_jquery

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

效果图如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jQuery自定义数值抽奖活动代码 - </title><base target="_blank" />

 <script type="text/javascript" src="http://down.yulu.jb51.net/jquery/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="http://yulu.jb51.net/texiao/jquery/76/pjs_01.js"></script>
 <style type="text/css">
  #bigDiv {
   width: 1080px;
   margin: 0px auto; /*div网页居中*/
   background-color: #494949;
   color: #FFFFFF;
  }

  h1 {
   text-align: center; /*文本居中*/
   padding-top: 10px;
  }

  #first, #second, #third {
   width: 360px;
   height: 360px;
   font-size: 150px;
   line-height: 360px;
   text-align: center;
   float: left; /*让三个盒子左浮动*/
  }

  #first {
   background-color: #009BFF;
   opacity: 0.9;
  }

  #second {
   background-color: #007CCC;
  }

  #third {
   background-color: #005388;
  }

  input {
   font-size: 30px;
   font-weight: 900;
  }

  #start {
   margin-left: 40%;
   margin-right: 5%;
  }a{color:blue;}
 </style>

</head>
<body>
 <div id="bigDiv">
  <h1>玩家幸运抽奖活动</h1>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <input type="button" value="开始" id="start">
  <input type="button" value="停止" id="stop" disabled="disabled">
 </div>

 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  <p>来源: <a href="http://yulu.jb51.net"></a>
<a href="http://yulu.jb51.net/texiao/">特效库</a>
<a href="http://yulu.jb51.net/h/bjaf/07a7l2on.htm">代码说明</a></p>
 </div>
</body>
</html>

js文件代码如下:

var ran = 0;
var range = 0;
var myNumber;
/*将产生随机数的方法进行封装*/
function sjs(range) {
 ran = Math.random() * range;//[0,range)的随机数
 var result = parseInt(ran);//将数字转换成整数
 return result;
}
/*对显示随机数的方法进行封装*/
function showRandomNum() {
 var figure = sjs(range);
 $("#first").html(figure);
 var figure2 = sjs(range);
 $("#second").html(figure2);
 var figure3 = sjs(range);
 $("#third").html(figure3);
}
$(function () {
 /*点击开始按钮,产生的事件*/
 $("#start").click(function () {

  range = prompt("请输入随机数范围:", "168");

  if (range == null)//http://yulu.jb51.net/h/bjaf/3siyd3x7.htm
  {
   return;
  }

  if (range == 0)
  {
   return;
  }

  if (isNaN(range))//http://yulu.jb51.net/h/bjaf/9vhm2l4f.htm
  {
   alert("请输入数字");
   return ;
  }
  /*将开始标签禁用,停止标签启用*/
  $("#start")[0].disabled = true;
  $("#stop")[0].disabled = false;
  if (range > 9999 || range<-999)
  {
   // by 何问起
   $("#bigDiv div").css("font-size", "60px");//http://yulu.jb51.net/h/bjaf/omgdn4mu.htm
   //return;
  }
  myNumber = setInterval(showRandomNum, 50);//多长时间运行一次,单位毫秒
 });
 /*点击结束按钮*/
 $("#stop").click(function () {
  /*将开始标签启用,停止标签禁用*/
  $("#start")[0].disabled = false;
  $("#stop")[0].disabled = true;
  clearInterval(myNumber);
 });
});

以上这篇jquery输入数字随机抽奖特效的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
随机抽奖
jquery图片随机抽奖、抽奖jquery特效代码、jquery 随机抽奖、jquery圆盘抽奖特效、jquery随机数抽奖,以便于您获取更多的相关知识。

时间: 2024-02-19 08:08:43

jquery输入数字随机抽奖特效的简单实现代码_jquery的相关文章

jquery ui dialog实现弹窗特效的思路及代码_jquery

  今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着

用jQuery模拟select下拉框的简单示例代码_jquery

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

jQuery div层的放大与缩小简单实现代码_jquery

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .content { border: 1px solid #ccc; width: 440px; overflow: hidden; margin: 10p

jQuery+CSS3文字跑马灯特效的简单实现_jquery

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&

jquery ui dialog实现弹窗特效的思路及代码

这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码,有需要的朋友可以参考一下     今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于 jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jQuery使用$.each遍历json数组的简单实现方法_jquery

本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法.分享给大家供大家参考,具体如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

jQuery判断元素是否显示 是否隐藏的简单实现代码_jquery

jQuery判断元素是否显示 是否隐藏的简单实现代码 var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 if(!node.is(':visible')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visib

js 限制文本框只能输入数字 汉字 字母与禁止输空格代码

1.文本框只能输入数字代码(小数点也不能输入)  代码如下 复制代码     <input onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')"> 2.只能输入数字,能输小数点.  代码如下 复制代码     <input onkeyup="if(isNaN(value))execComm