js实现抽奖系统功能代码分享-js教程-PHP中文网

首页

web前端

js教程

js实现抽奖系统功能代码分享

小云云

Feb 08, 2018 pm 01:15 PM

javascript 代码功能

本文主要和大家详细介绍了一个关于抽奖系统的题目之js抽奖系统功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助大家运用js开发一个抽系统。

要求实现功能：

1.点击左侧按键，开始抽奖，点击右侧按键，停止抽奖；

2.敲击回车键，开始抽奖，再次敲击回车键，停止抽奖；

3.开始抽奖后，左侧按钮变色；

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抽奖</title>
  <link rel="stylesheet" href="style.css">
  <script src="eventUtil.js"></script>
  <script src="js.js"></script>
</head>
<body>
<p class="box">
  <p id="header">开始抽奖啦！</p>
  <p id="btn">
    <span id="start">开始</span>
    <span id="stop">结束</span>
  </p>
</p>
</body>
</html>

登录后复制

css:

body{
  margin: 0;
  padding: 0;
}
.box{
  width: 400px;
  height: 200px;
  border: 1px solid #0C4E7C;
  margin: 0 auto;
}
#header{
  color:darkred;
  font-size: 24px;
  text-align: center;
  width: 400px;
  height: 60px;
  line-height: 60px;
}
#btn{
  width: 200px;
  overflow: hidden;
  margin: 30px auto 0;
}
#btn span{
  cursor: pointer;
  border: 2px solid #a09a09;
  border-radius: 7px;
  margin-right: 10px;
  color: #000;
  display: inline-block;
  height: 40px;
  width: 80px;
  background-color: #f2ec55;
  line-height: 40px;
  text-align: center;
}

登录后复制

JavaScript:

js.js:
var date = ["谢谢参与", "谢谢参与", "谢谢参与", "50元话费", "ipad", "佳能相机", "苹果手机", "3DS", "switch", "1000元超市购物卡"];
var timer = null;
var flag = 0;


window.onload = function () {

  // var header = document.getElementById("header");优化前
  var start = document.getElementById("start");
  var stop = document.getElementById("stop");
//鼠标抽奖
  eventUtil.addHandler(start, "click", getStart);
  eventUtil.addHandler(stop, "click", getStop);
//键盘抽奖；
  document.onkeyup = function (event) {
    var e = event || window.event;
    //检测按键键值；
    // console.log(e.keyCode);
    if (e.keyCode === 13) {
      if (flag === 0) {
        getStart();
        flag = 1;
      } else {
        getStop();
        flag = 0;
      }
    }
  };

  function getStart() {
    clearInterval(timer);
    var header = document.getElementById("header");//优化后
    timer = setInterval(function () {
      //代码优化前
      //var x = parseInt(Math.random()*10);
      var random = Math.floor(Math.random() * date.length);
      header.innerHTML = date[random];
    }, 50);
    start.style.backgroundColor = "#999";
    flag = 1;
  }

  function getStop() {
    clearInterval(timer);
    start.style.backgroundColor = "#f2ec55";
    flag = 0;
  }
};

登录后复制

eventUtil.js

var eventUtil = {
  getEvent:function (event) {
    return event?event:window.event;
  },
  getType: function (event) {
    return event.type;
  },
  getTarget:function (event) {
    return event.target||event.srcElement;
  },
  //阻止冒泡
  stopPropagation:function (event) {
    if(event.stopPropagation){
      event.stopPropagation();
    }else {
      event.cancelBubble=true;
    }
  },
  //阻止事件默认行为；
  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else {
      event.returnValue = false;
    }
  },
  //添加具柄；
  addHandler: function (element, type, Handler) {
    if (element.ç) {
      element.addEventListener(type, Handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, Handler);
    } else {
      element["on" + type] = Handler;
    }
  },
  //删除具柄；
  removeHandler: function (element, type, Handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, Handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, Handler);
    } else {
      element["on" + type] = null;
    }
  }
};

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7554

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

豆包app有什么功能 Mar 01, 2024 pm 10:04 PM

豆包app里会有很多ai创作的功能，那么豆包app有什么功能呢？用户们可以通过这个软件来创作绘画，和ai进行聊天，还能够为用户生成文章，帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法，下面就是具体内容，赶紧看看吧！豆包app有什么功能答：可以绘画、聊天、写文、找歌。功能介绍：1、问题查询：可以通过ai来更快的找到问题的答案，什么样的问题都是可以询问。2、图片生成：可以有ai来为大家创建不同的图片，只需要告诉大家大概的要求。3、ai聊天：能够为用户们创建一个可以聊天的ai，

vivox100s和x100区别：性能对比及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手机都是vivo手机产品线中的代表机型，它们分别代表了vivo在不同时间段内的高端技术水平，因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较，帮助消费者更好地选择适合自己的手机。首先，我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的

自媒体到底是什么？它的主要特点和功能有哪些？ Mar 21, 2024 pm 08:21 PM

随着互联网的快速发展，自媒体这个概念已经深入人心。那么，自媒体到底是什么？它有哪些主要特点和功能呢？接下来，我们将一一探讨这些问题。一、自媒体到底是什么？自媒体，顾名思义，就是自己就是媒体。它是指通过互联网平台，个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体，如报纸、电视、电台等，自媒体具有更强的互动性和个性化，让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些？1.低门槛：自媒体的崛起降低了进入媒体行业的门槛，不再需要繁琐的设备和专业的团队，一部手

GE通用远程代码可在任何设备上编程 Mar 02, 2024 pm 01:58 PM

如果您需要远程编程任何设备，这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么？GEUniversalRemote是一款遥控器，可用于控制多个设备，如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号，具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码，可在任何设备上编程GE遥控器配备一组代码，使其能够与不同设备相配合。您可

小红书账号管理软件有哪些功能？怎么经营小红书账号？ Mar 21, 2024 pm 04:16 PM

随着小红书在年轻人中的流行，越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中，我们将讨论一些小红书账号管理软件的功能，并探讨如何更好地经营小红书账号。随着社交媒体的发展，许多人发现自己需要管理多个社交账号。对于小红书用户来说，这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号，包括自动发布内容、定时发布、数据分析等功能。通过这些工具，用户可以更高效地管理他们的账号，提高账号的曝光率和关注度。另一、小红书账号管理软件有

PHP技巧：快速实现返回上一页功能 Mar 09, 2024 am 08:21 AM

PHP技巧：快速实现返回上一页功能在网页开发中，经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验，让用户更加方便地在网页之间进行导航。在PHP中，我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能，并提供具体的PHP代码示例。在PHP中，我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL

什么是Discuz？Discuz的定义和功能介绍 Mar 03, 2024 am 10:33 AM

《探索Discuz：定义、功能及代码示例》随着互联网的迅猛发展，社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中，Discuz作为国内较为知名的一种开源论坛软件，备受广大网站开发者和管理员的青睐。那么，什么是Discuz？它又有哪些功能，能为我们的网站提供怎样的帮助呢？本文将对Discuz进行详细介绍，并附上具体的代码示例，帮助读者更

如何使用Copilot生成代码 Mar 23, 2024 am 10:41 AM

作为一名程序员，对于能够简化编码体验的工具，我感到非常兴奋。借助人工智能工具的帮助，我们可以生成演示代码，并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能，我们可以更好地理解现有代码的含义。如何使用Copilot生成代码？要开始，我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点，你需要进入扩展页面，搜索“PowerPlatformTool”，然后点击Install按钮

See all articles

js实现抽奖系统功能代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题