基于JavaScript实现简单的随机抽奖小程序,javasc
分类:计算机网络

javascript贯彻平米,亩,公顷单位换算,可以因此url传递参数内定输入框的值为别的中单位的值。

创立三个简易的抽取奖金系统!应接大家学习!

基于JavaScript完成简单的随便抽取奖金小程序,javascript小程序

对于抽取奖品那样的小程序选拔诸如VB,Delphi等工具来落实会相比较的方便,由于小编机器上从未有过装那样的应用程序,所以不得不另寻其道。为了使抽取奖金程序能够无需配置平台一直能够在另外一台机器上运转,开采工具和编译运维工具也可以经或者轻松(诸如text文本就可以编辑,window系统自带的浏览器就可以编写翻译运转的意况),决定尝试使用javascript来做。本身对javascript的钻研不深,日常重要用以网址开荒中对来源客商端的多寡开展中用剖断(基于安全性的设想,安全性供给高的网址尽量使用劳务器端语言对数据有效性进行判断),涉及到的都以最常用的点子、函数。所以以下顺序只好称得上是相比较简陋,分界面效果和作用都很“朴素”。

其间第一关键点是取随机数,在制定数字范围内取随机数使用公式 (范围上限-范围下限+1)*Math.random()+范围下限。以下是源代码:

<html> 
<head> 
<title> 抽奖小程序 </title> 
<!--javascript程序——Begin--> 
<script language="javascript"> 
//抽奖数字范围初始化 
var from=1; //起始值 
var to=1523; //终止值 
numarray=new Array(); //保存抽奖数字的数组 
flagarray=new Array(); //记录数字是否中奖的标示数组 
countaward=new Array(0,0,0); //记录每组抽奖次数,这里只抽三组奖 
/** 
函数名:sysInit 
传入参数:无 
返回值:ture/false 
功能:抽奖系统初始化,设定抽奖数字范围、初始化抽奖数字数组和标示数组 
*/ 
function sysInit() 
{ 
/*设定抽奖数字范围*/ 
//接受用户设定操作 
mixNum=prompt('起始值',1); 
maxNum=prompt('终止值',1523); 
//判断用户没有输入任何数据或输入空字符 
if(mixNum!=null&&maxNum!=null&&mixNum!=""&&maxNum!="") 
{ 
//判断用户输入的数据是否是合法的数字 
strTemp="0123456789"; 
for (i=0;i<(mixNum+maxNum).length;i++) 
{ 
j=strTemp.indexOf((mixNum+maxNum).charAt(i)); 
if (j==-1) 
{ 
alert("起始数字范围不正确,程序中断!"); 
return false; 
}//end if 
}//end for 
//若用户输入合法数字,则重新设定抽奖范围 
from=parseInt(mixNum); 
to=parseInt(maxNum); 
}//end if 
//初始化抽奖数字数组和标示数组 
for(i=0;i<(to-from);i++) 
{ 
numarray[i]=from+i; 
flagarray[i]=0; 
} 
//抽奖按钮有效 
first.disabled=false; 
second.disabled=false; 
third.disabled=false; 
return true; 
} 
/** 
函数名:getLuck 
传入参数:奖次award,此项奖总数awardtotal 
返回值:无 
功能:无重复抽取中奖数 
*/ 
function getLuck(award,awardtotal) 
{ 
var msg=""; 
//当抽奖数大于等于20个时,使用每次抽取10个中奖数。 
for(i=0;i<(awardtotal>=20?10:1);i++) 
{ 
//设定循环抽取随机数并判断,防止数字重复取 
while(a=1) 
{ 
//判断提示某项奖已经取完 
if(countaward[award-1]==awardtotal) 
{ 
alert(award+"等奖已经取满"+awardtotal+"个"); 
return; 
} 
//在抽奖数字范围内抽取随机数 
lucky=Math.round((to-from+1)*Math.random()+from); 
//判断上面抽取的随机数是否已经取过 
if(numarray[lucky-from]==lucky&&flagarray[lucky-from]==0) 
{ 
flagarray[lucky-from]=award; 
countaward[award-1]++; 
msg+=award+"等奖N"+countaward[award-1]+":"+lucky+"n"; 
break; 
}//end if 
}//end while 
}//end for 
alert(msg); 
return; 
} 
/** 
函数名:showLuck 
传入参数:无 
返回值:无 
功能:显示中奖的所有数 
*/ 
function showLuck() 
{ 
var str1="一等奖:<p>"; 
var str2="二等奖:<p>"; 
var str3="三等奖:<p>"; 
for(i=0;i<(to-from);i++) 
{ 
switch(flagarray[i]) 
{ 
case 1: 
str1=str1+numarray[i]+"<br>"; 
break; 
case 2: 
str2=str2+numarray[i]+"<br>"; 
break; 
case 3: 
str3=str3+numarray[i]+"<br>"; 
break; 
} 
} 
//显示三个奖项的中奖数 
document.write(str1); 
document.write(str2); 
document.write(str3); 
} 
</script> 
<!--javascript程序——End--> 
</head> 
<body> 
<center> 
<p><strong><font size="3" color="red">开始抽奖喽!!!</font></strong></p> 
<input type="button" name="range" value="设定抽奖系统" onclick="javascript:sysInit();"><p> 
<input type="button" name="first" value="抽取一等奖" disabled onclick="javascript:getLuck(1,3);"><p> 
<input type="button" name="second" value="抽取二等奖" disabled onclick="javascript:getLuck(2,20);"><p> 
<input type="button" name="third" value="抽取三等奖" disabled onclick="javascript:getLuck(3,100);"><p> 
<input type="button" name="show" value="显示抽奖结果" onclick="javascript:showLuck();"><p> 
</center> 
</body> 
</html> 

基于JavaScript实现不难的妄动抽取奖金小程序代码到此结束了,以上代码注释写的比较详细,有不精晓的地点接待提议,帮客之家作者会在第有时间给大家应对的,谢谢我们对帮客之家网址的支撑。

本文实例陈诉了依附Marquee.js插件达成的跑马灯效果。分享给大家供大家参照他事他说加以考察,具体如下:

源代码如下:

图片 1

你或者感兴趣的篇章:

  • JavaScript 抽取奖金效果落实代码 数字跳动版
  • javascript 随机抽取奖品程序代码
  • JS模拟抽取奖金序效果落到实处代码
  • js倒计时小程序
  • js和html5落到实处手提式有线电话机端刮刮卡抽奖效果完美包容android/IOS
  • js抽奖完结自由抽取奖品代码效果
  • javascript兑现的平米、亩、公顷单位换算小程序
  • javascript+canvas制作九宫格小程序
  • js达成大转盘抽取奖金游戏实例

对于抽取奖品这样的小程序选取诸如VB,Delphi等工具来兑现会比较的惠及,由于自己机...

1、Marquee.js文件

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现的平方米、亩、公顷单位换算小程序</title>
</head>

<body>

<select onchange="selectChange(this)" id="sel">
<option value="公顷">公顷</option>
<option value="亩">亩</option>
<option value="平方米">平方米</option>
</select>
这个input的值可能是3公顷、3亩、3平方米
<input type="text" value="3" id="input0"/>
<script type="text/javascript">
     var a = parseInt('0'); /////这里改为你动态接受到的值,0代表单位为平方米,1为亩,2为公顷
     var sel = document.getElementById('sel');
     sel.selectedIndex = 2 - a; /////设置单位下拉
     var lastUnit = document.getElementById('sel').value; //记录当前单位
     var input = document.getElementById("input0");
     //10000平米 = 15亩 = 1公顷
     var fRate = {//换算率
       公顷: { 亩: 15, 平方米: 10000 },
       亩: { 平方米: 10000 / 15, 公顷: 1 / 15 },
       平方米: { 亩: 15 / 10000, 公顷: 1 / 10000}
     };
     function selectChange(obj) {//单位改变,执行换算
       var v = parseFloat(input.value);//得到原来的值
       //执行换算,注意fRate的取值,得到上一次的单位节点,再取当前单位的换算率
       var rst = (v * fRate[lastUnit][sel.value]).toFixed(4);//保留4位小数
       input.value = rst;
       lastUnit = sel.value;//更新当前单位变量
     }
</script>

</body>
</html>

JS原理:构造建设二个数组用来囤积抽取奖品内容,举个例子 iphone6 等,当点击初始的时候,开启动和停止车计时器,发生贰个率性数,把对应文本的innerHTML改成数组所对应的剧情。

/****************************************************************
- Marquee.js
- 参数:
- ID:滚动对象(必须)
- Direction:滚动方向("top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3)
- Step:步伐
- Width:宽度
- Height:高度
- Timer:影响步伐滚动速度
- DelayTime:延时时间
- WaitTime:初始化时的等待时间
- ScrollStep:卷页步伐
*****************************************************************/
function Marquee(obt) {
  if (obt == null || obt == "") {
    return;
  }
  this.ID = document.getElementById(obt.ID);
  if (!this.ID) {
    alert("初始化错误rn请检查标签id设置是否正确!");
    this.id = -1;
    return;
  }
  this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
  this.Step = 1;
  this.Timer = 30;
  this.DirectionArray = { "top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3 };
  if (typeof obt.Direction == "number" && obt.Direction) this.Direction = obt.Direction;
  if (typeof obt.Direction == "string" && obt.Direction) this.Direction = this.DirectionArray[obt.Direction.toString().toLowerCase()];
  if (typeof obt.Step == "number" && obt.Step) this.Step = obt.Step;
  if (typeof obt.Width == "number" && obt.Width) this.Width = obt.Width;
  if (typeof obt.Height == "number" && obt.Height) this.Height = obt.Height;
  if (typeof obt.Timer == "number" && obt.Timer) this.Timer = obt.Timer;
  if (typeof obt.DelayTime == "number" && obt.DelayTime) this.DelayTime = obt.DelayTime;
  if (typeof obt.WaitTime == "number" && obt.WaitTime) this.WaitTime = obt.WaitTime;
  if (typeof obt.ScrollStep == "number" && obt.ScrollStep) this.ScrollStep = obt.ScrollStep;
  this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
  this.ID.noWrap = true;
  this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
  this.Start();
}
Marquee.prototype.Start = function() {
  if (this.ID == -1) return;
  if (this.Width == 0) this.Width = parseInt(this.ID.style.width);
  if (this.Height == 0) this.Height = parseInt(this.ID.style.height);
  if (this.Timer < 20) this.Timer = 20;
  if (this.WaitTime < 800) this.WaitTime = 800;
  this.HalfWidth = Math.round(this.Width / 2);
  this.HalfHeight = Math.round(this.Height / 2);
  this.BakStep = this.Step;
  this.ID.style.width = this.Width + "px";
  this.ID.style.height = this.Height + "px";
  if (typeof this.ScrollStep != "number") this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;
  var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";
  var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";
  var msobj = this;
  msobj.tempHTML = msobj.ID.innerHTML;
  if (msobj.Direction <= 1) {
    msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g, msobj.ID.innerHTML);
  }
  else {
    if (msobj.ScrollStep == 0 && msobj.DelayTime == 0) {
      msobj.ID.innerHTML += msobj.ID.innerHTML;
    }
    else {
      msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g, msobj.ID.innerHTML);
    }
  }
  var timer = this.Timer;
  var delaytime = this.DelayTime;
  var waittime = this.WaitTime;
  msobj.StartID = function() { msobj.Scroll() }
  msobj.Continue = function() {
    if (msobj.MouseOver == 1) {
      setTimeout(msobj.Continue, delaytime);
    }
    else {
      clearInterval(msobj.TimerID);
      msobj.CTL = msobj.Stop = 0;
      msobj.TimerID = setInterval(msobj.StartID, timer);
    }
  }
  msobj.Pause = function() {
    msobj.Stop = 1;
    clearInterval(msobj.TimerID);
    setTimeout(msobj.Continue, delaytime);
  }
  msobj.Begin = function() {
    msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2;
    if ((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) {
      msobj.ID.innerHTML = msobj.tempHTML;
      delete (msobj.tempHTML);
      return;
    }
    delete (msobj.tempHTML);
    msobj.TimerID = setInterval(msobj.StartID, timer);
    if (msobj.ScrollStep < 0) return;
    msobj.ID.onmousemove = function(event) {
      if (msobj.ScrollStep == 0 && msobj.Direction > 1) {
        var event = event || window.event;
        if (window.event) {
          if (msobj.IsNotOpera) {
            msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX;
          }
          else {
            msobj.ScrollStep = null;
            return;
          }
        }
        else {
          msobj.EventLeft = event.layerX - msobj.ID.scrollLeft;
        }
        msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2;
        msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);
        msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep * 2) / msobj.HalfWidth);
      }
    }
    msobj.ID.onmouseover = function() {
      if (msobj.ScrollStep == 0) return;
      msobj.MouseOver = 1;
      clearInterval(msobj.TimerID);
    }
    msobj.ID.onmouseout = function() {
      if (msobj.ScrollStep == 0) {
        if (msobj.Step == 0) msobj.Step = 1;
        return;
      }
      msobj.MouseOver = 0;
      if (msobj.Stop == 0) {
        clearInterval(msobj.TimerID);
        msobj.TimerID = setInterval(msobj.StartID, timer);
      }
    }
  }
  setTimeout(msobj.Begin, waittime);
}
Marquee.prototype.Scroll = function() {
  switch (this.Direction) {
    case 0:
      this.CTL += this.Step;
      if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
        this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
        this.Pause();
        return;
      }
      else {
        if (this.ID.scrollTop >= this.ClientScroll) {
          this.ID.scrollTop -= this.ClientScroll;
        }
        this.ID.scrollTop += this.Step;
      }
      break;
    case 1:
      this.CTL += this.Step;
      if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
        this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
        this.Pause();
        return;
      }
      else {
        if (this.ID.scrollTop <= 0) {
          this.ID.scrollTop += this.ClientScroll;
        }
        this.ID.scrollTop -= this.Step;
      }
      break;
    case 2:
      this.CTL += this.Step;
      if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
        this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
        this.Pause();
        return;
      }
      else {
        if (this.ID.scrollLeft >= this.ClientScroll) {
          this.ID.scrollLeft -= this.ClientScroll;
        }
        this.ID.scrollLeft += this.Step;
      }
      break;
    case 3:
      this.CTL += this.Step;
      if (this.CTL >= this.ScrollStep && this.DelayTime > 0) {
        this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
        this.Pause();
        return;
      }
      else {
        if (this.ID.scrollLeft <= 0) {
          this.ID.scrollLeft += this.ClientScroll;
        }
        this.ID.scrollLeft -= this.Step;
      }
      break;
  }
}

你或然感兴趣的篇章:

  • JavaScript 抽取奖品效果落到实处代码 数字跳动版
  • javascript 随机抽取奖品程序代码
  • JS模拟抽取奖品序效果落到实处代码
  • js倒计时小程序
  • js和html5得以实现手提式有线电话机端刮刮卡抽取奖金效果完美包容android/IOS
  • js抽取奖品达成自由抽取奖金代码效果
  • javascript+canvas制作九宫格小程序
  • js实现大转盘抽取奖金游戏实例
  • 基于JavaScript落成轻巧的放肆抽取奖品小程序

若果想让有些抽取奖金可能率变高,能够让数组中某些值重复次数多点。接下来看代码。、

2、脚本调用

JavaScript代码

window.onload = function() {
  new Marquee({ ID: "scrollNews", Direction: "top", Step: 2, Width: 0, Height: 80, Timer: 50, DelayTime: 1000, WaitTime: 1000, ScrollStep: 80 });
}
window.onload = function(){
  var data = [
    "iphone 6s plus",
    "苹果Mac 笔记本",
    "美的洗衣机",
    "凌美钢笔",
    "谢谢参与",
    "索尼入耳式耳机",
    "雷柏机械键盘",
    "《javaScript高级程序设计》",
    "精美保温杯",
    "维尼小熊一只",
    "500元中国石化加油卡",
    "爱奇艺年费会员",
    "iPad mini",
    "32G U盘",
  ];
  var bStop = true;
  var timer = null;
  var btns = document.getElementById('btns').getElementsByTagName('span');
  var text = document.getElementById('text');

  btns[0].onclick = start;
  btns[1].onclick = stop;

  document.onkeyup = function(event){
    event = event||window.event;
    if(event.keyCode==13){
      if(bStop){
        start();
      }else {
        stop();
      }
    }
  }

  function start(){
    clearInterval(timer);
    timer = setInterval(function(){
      var r = Math.floor(Math.random()*data.length);
      text.innerHTML = data[r];
    },20);
    btns[0].style.background = '#666';
    bStop = false;
  }

  function stop(){
    clearInterval(timer);
    btns[0].style.background = 'blue';
      bStop = true;

  }
}

更加多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript切换特效与手艺总计》、《JavaScript动画特效与技术汇总》、《JavaScript错误与调解技能计算》、《JavaScript数据结构与算法技艺计算》及《JavaScript数学生运动算用法总计》

html css 代码:

但愿本文所述对我们JavaScript程序设计具备支持。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抽奖啦</title>
  <style>
    * {
      margin: 0;
      padding:0;
    }
    #container {
      width: 500px;
      height: 200px;
      margin: 100px auto;
      background: red;
      position: relative;
      padding-top: 20px;
    }
    #container p {
      position: absolute;
      bottom: 4px;
      left: 30px;
    }
    #btns {
      position: absolute;
      left: 118px;
      bottom: 30px;
    }
    #container h1 {
      color: #fff;
      text-align: center;
    }
    #btn-start,#btn-stop {
      width: 100px;
      height: 60px;
      background: blue;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
      display: inline-block;
      color: #fff;
      margin-right: 60px;
      border-radius: 10px;
      cursor: pointer;
    }
  </style>
  <script src="index.js"></script>
</head>
<body>
  <div id="container">
    <h1 id="text">iphone 6s plus</h1>
    <p>小提示:您可以按下Enter键来控制开始暂停,祝您中大奖哟</p>
    <div id="btns">
      开始
      停止
    </div>
  </div>
</body>
</html>

您大概感兴趣的小说:

  • 原生JS完结跑马灯效果
  • Javascript落到实处跑马灯效果的总结实例
  • JavaScript贯彻跑马灯抽取奖品活动实例代码深入分析与优化(二)
  • JavaScript兑现跑马灯抽取奖品活动实例代码分析与优化(一)
  • javascript跑马灯抽取奖品实例疏解
  • javascript音讯跑马灯实例代码
  • JS完毕景况栏跑马灯文字效果代码
  • js文本框走动跑马灯效果代码分享
  • javascript 单行文字向上跑马灯滚动呈现
  • js达成文字跑马灯效果

希望本文所述对我们的求学抱有协助,轻巧完毕抽取奖品系统。

你或然感兴趣的篇章:

  • js组件SlotMachine完毕图片切换效果制作抽取奖金系统
  • javascript HTML5 Canvas完成圆盘抽取奖金作用
  • 基于javascript实现轻便的抽取奖品系统
  • 基于JavaScript完结轻便的任性抽取奖金小程序
  • JS完结转动随机数抽取奖品的特效代码
  • js完成简易的单数字随机抽取奖金(0-9)
  • js和html5兑现手提式有线电话机端刮刮卡抽奖效果完美包容android/IOS
  • JS模拟抽取奖品序效果实现代码
  • js抽取奖金达成自由抽取奖金代码效果
  • js达成可键盘调控的简要抽取奖品程序

本文由美高梅网址发布于计算机网络,转载请注明出处:基于JavaScript实现简单的随机抽奖小程序,javasc

上一篇:jQuery实现的一个tab切换效果内部还嵌有切换,c 下一篇:没有了
猜你喜欢
热门排行
精彩图文