首页 web前端 js教程 js简单抽奖代码_javascript技巧

js简单抽奖代码_javascript技巧

May 16, 2016 pm 04:19 PM
抽奖

核心:js的Math对象和Array对象

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>random</title>
 <style>
  #awardListDom{width: 100%;}
 </style>
</head>
<body>
 <label for="awardListDom">奖项列表</label><br>
 <input type="text" value="" id="awardListDom"> <br>
 <label for="num">抽到的奖</label><br>
 <input type="text" value="" id="num"> <br>
 <button id="submit">开始抽奖</button>
 <script>
  /* 
  * 思路:随机抽奖,抽一个奖项便减少一个
  * Math 对象方法:http://www.w3school.com.cn/jsref/jsref_obj_math.asp
  *  -random():返回 0 ~ 1 之间的随机数。
  *  -floor():获取整数
  * 数组操作:
  *  - splice(x,y); x:起始位置, y:获取并删除个数
  */

  function random(min,max){
    return Math.floor(min+Math.random()*(max-min));
  }
  var awardListDom=document.getElementById("awardListDom"),
  num=document.getElementById("num"),
  submit=document.getElementById("submit");
  var awardList=["一等奖","二等奖","二等奖","三等奖","三等奖","三等奖","鼓励奖","鼓励奖","鼓励奖","鼓励奖","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与"];

  awardListDom.value=awardList;
  submit.onclick=function(){
   //引用数组
   var oldArray=awardList;
   var rNum=random(0,oldArray.length);
   
   if(oldArray.length<1){
    awardListDom.value="活动结束";
    num.value="活动结束";
   }
   else{
    num.value=oldArray[rNum];
    oldArray.splice(rNum,1);
    awardListDom.value=oldArray;
   }
  }
 </script>
</body>
</html>
登录后复制

demo:http://demo.jb51.net/js/2015/choujiang/

github:https://github.com/litengdesign/award

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

excel抽奖小程序如何制作 excel抽奖小程序如何制作 Mar 20, 2024 am 11:40 AM

平时的工作中会遇到很多需要抽签进行的内容,传统的方法还是用纸质的号码随机抽号,随着电子软件的发展,我们可以用电脑制作抽签,今天欠们给大家分享的课程是excel抽奖小程序如何制作。1、首先我们打开Excel软件,打开我们准备好的表格,表格中要包含我们人的名字。  2、接着我们对右边的单元格进行合并,将今晚谁幸运填充为黑色,并将下方的单元格合并填充为红色,如下图所示。  3、接着我们在红色区域中输入randbetween函数,设置第一行为2,最后一行为7,如下图所示。  4、接着我们在前面输入ind

PHP抽奖系统设计与实现详解 PHP抽奖系统设计与实现详解 Mar 01, 2024 am 09:51 AM

PHP抽奖系统设计与实现详解一、概述抽奖活动是许多网站和应用都会使用的一种营销手段,通过抽奖可以吸引用户参与活动,增加用户互动性,提升用户粘性。在本文中,我们将详细介绍如何使用PHP语言来设计和实现一个简单的抽奖系统。通过本文的学习,读者将会了解抽奖系统的搭建原理以及具体的代码实现。二、系统设计在设计一个抽奖系统之前,我们首先需要确定系统的功能需求和流程。一

如何使用Vue实现抽奖转盘特效 如何使用Vue实现抽奖转盘特效 Sep 19, 2023 am 10:18 AM

如何使用Vue实现抽奖转盘特效抽奖活动作为一种受欢迎的营销手段,经常出现在各种活动中。为了增加趣味性和互动性,我们可以使用Vue框架实现一个抽奖转盘特效。这篇文章将会介绍如何使用Vue来实现这一特效,并给出具体的代码示例。首先,我们需要创建一个Vue实例,用于控制转盘的状态和动画。在这个实例中,我们需要定义转盘的初始状态,包括奖品列表、转盘是否正在旋转、转盘

使用PHP开发抽奖功能的步骤与技巧 使用PHP开发抽奖功能的步骤与技巧 Feb 29, 2024 pm 04:42 PM

标题:使用PHP开发抽奖功能的步骤与技巧在网站开发中,抽奖功能常常被用来增加用户互动性和吸引力。使用PHP语言来开发抽奖功能是一种常见的方式。在本文中,将介绍如何使用PHP来开发一个简单的抽奖功能,并给出具体的代码示例。步骤一:准备数据库首先,我们需要创建一个MySQL数据库来存储抽奖活动的相关数据,包括奖品信息、参与用户信息等。可以使用以下SQL命令创建一

MySQL实现抽奖功能,创建奖品表的步骤 MySQL实现抽奖功能,创建奖品表的步骤 Jul 01, 2023 am 09:29 AM

MySQL创建奖品表实现抽奖功能的步骤抽奖活动作为一种常见的市场营销手段,被广泛运用于各个领域。为了实现抽奖功能,我们可以使用MySQL数据库创建一个奖品表,并通过数据库操作来实现抽奖的整个流程。本文将介绍使用MySQL创建奖品表并实现抽奖功能的步骤。第一步:创建奖品表在MySQL中,我们可以使用CREATETABLE语句来创建奖品表。奖品表至少应包含以下

php怎么实现抽奖 php怎么实现抽奖 Dec 19, 2022 am 10:10 AM

php实现抽奖的方法:1、创建一个php示例文件;2、定义奖池拥有的奖品;3、通过“shuffle($prize);”方法进行随机抽奖;4、使用“print_r($prize[0]);”打印抽奖结果即可。

抖音抽奖怎么提高中奖率?有哪些技巧? 抖音抽奖怎么提高中奖率?有哪些技巧? Mar 07, 2024 pm 02:43 PM

在当今社交媒体的繁荣时代,抖音短视频已经成为了人们生活中不可或缺的一部分。而抖音上的抽奖活动也是吸引了无数用户的关注和参与。然而,很多人常常遇到一个问题:如何提高自己在抖音抽奖中的中奖率呢?本文将为大家总结几个提高中奖率的技巧,帮助你在抖音抽奖中获得更多的好运。1.仔细阅读抽奖规则要提高中奖率,我们不能忽视抽奖规则。每个抽奖活动都会有详细的规则说明,包括参与条件、抽奖时间和方式等。在参与之前,务必认真阅读规则,并确保自己符合所有条件。有时候,还可以通过仔细阅读规则,发现一些隐藏的机会,从而增加中

如何使用PHP实现微信小程序中的抽奖和福利 如何使用PHP实现微信小程序中的抽奖和福利 Jun 02, 2023 am 10:51 AM

随着微信小程序的普及,越来越多企业开始通过微信小程序来开展业务。其中,抽奖和福利活动既能增强用户粘度,也能提升企业知名度。本文将介绍如何使用PHP来实现微信小程序中的抽奖和福利活动。一.微信小程序登录首先,我们需要对微信小程序的登录进行了解。在微信小程序中,用户如果需要登录,必须打开微信提供的登录授权页,并同意授权,然后我们才能获取到用户的信息,进而进行抽

See all articles