200行HTML+JavaScript实现年会抽奖程序

程序员文章站 2023-11-16 20:03:10

本文实例为大家分享了js实现年会抽奖程序的具体代码，供大家参考，具体内容如下需求分析 1.多轮抽奖，每轮只有3个环节：展示奖品图，人名闪动，停止闪动确定中奖名单 2...

本文实例为大家分享了js实现年会抽奖程序的具体代码，供大家参考，具体内容如下

需求分析

1.多轮抽奖，每轮只有3个环节：展示奖品图，人名闪动，停止闪动确定中奖名单
2.中奖分级，例如试用期员工不能中二等奖或以上
3.每轮抽奖的中奖人数不同。每个人只能中一次奖
4.可临时加场，现场输入奖品名、数量。额外窗口输入，避免被观众看到修改过程。
5.本地记录每轮的奖品和中奖名单
6.全屏显示。不确定现场的屏幕分辨率，故核心部分固定1024*768，居中显示；背景拉伸铺满全屏。

200行HTML+JavaScript实现年会抽奖程序

技术选型

搞桌面程序第一时间就想到了这几个框架：java swing、python tkinter、c++ qt、c# wpf。虽然都可行，但感觉开发不够便捷。而且谁知道年会现场那台电脑有没有对应的运行时库。

最后经同事给的灵感想到了用javascript做，选定了node-webkit，即nw.js。没有选electron是它需要搭开发环境。

既然连开发环境都懒得搭，那自然也用不了vue、react、angular。实际上也没必要，小学生才用牛刀杀鸡。

代码开源

开源在。文末会贴一下当前的版本，但以github上的为准。

使用方法
启动
windows的启动方法：到下载node-webkit，解压出来，把代码的整个目录拖动到nwjs.exe上。

其它操作系统按官方说明做：

cd /path/to/your/app
/path/to/nw .

/path/to/nw is the binary file of nw.js. on windows, it's nw.exe; on linux, it's nw; on mac, it's nwjs.app/contents/macos/nwjs.

按键

f：切换全屏
4：下一步。进入下一轮抽奖的展示奖品图片、进入名单滚动。
空格：立刻停止名单滚动。即确定中奖人员。
8：重新加载配置文件。主要用于临场增加奖项
1：上一步，用来看看上个奖项的情况

核心文件说明

index.html：所有代码都在这
steps.json：流程配置文件，应该一看就懂。中奖后此文件会被修改，包含中奖名单。如果需要加奖项，不用退出程序，编辑完这个文件后按8就能重新加载配置，继续抽。
names.ini：人员名单与可中奖等级，等级数字越小表示可中更大的奖。中奖后此文件会被修改，删除已中奖的人

todo

启动的时候设置窗口大小和位置会闪动，可以做得体验好点，虽然没必要
更多的可动态设置项
启动方式还是有点别扭，可打包一下程序

代码

程序步骤说明：

1.调整窗口大小和位置
2.读取配置文件，得到人员名单和抽奖轮次信息
3.进入第1轮。通过按键4和空格进入下个环节
4.用state变量来记录状态：展示图片、滚动名单、显示中奖名单

html的部分：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <script>
  var win = nw.window.get()
  win.resizeto(1024, 768)
  win.moveto(0, 0)
 </script>
 <style type="text/css">
  * {
  margin: 0;
  padding: 0;
  }
  html, body {
  width: 100%;
  height: 100%;
  }
  body {
  text-align: center;
  background: url("./bg.png") no-repeat;
  overflow: hidden;
  background-size: 100% 100%;
  font-weight: bold;
  color: #d40000;
  }
  #container {
  min-width: 1000px;
  min-height: 700px;
  }
  #title {
  font-size: 100px;
  margin-top: 80px;
  }
  #disc {
  font-size: 40px;
  margin: 10px 0;
  }
  #image {
  margin-top: 20px;
  max-height: 280px;
  border: 1px solid #e23540ff;
  border-radius: 20px;
  }
  #list {
  margin: 0 auto;
  max-width: 800px;
  }
  #list span {
  display: inline-block;
  width: 160px;
  font-size: 36px;
  margin-top: 8px;
  }
 </style>
 </head>

 <body>
 <div id="container">
  <div id="title">xx公司年会</div>
  <div id="disc">奖品描述</div>
  <img id="image" />
  <div id="list"></div>
 </div>
 <script>
  var fs = require('fs')
  var steps = null
  var step = 0
  var names = null
  var state = ''
  
  var disc = document.getelementbyid('disc')
  var image = document.getelementbyid('image')
  var list = document.getelementbyid('list')

  function reloadconf(func) {
  fs.readfile('names.ini', 'utf8', function(err, data) {
   names = data.split('\n').map(x => x.split(','))
  })
  fs.readfile('./steps.json', 'utf8', function(err, data) {
   steps = eval(data)
   if (func) func()
  })
  }

  function saveconf(func) {
  fs.writefile('./steps.json', json.stringify(steps), function(err) {
   if (err) {
   alert(err)
   }
  })
  fs.writefile('./names.ini', names.map(x => x.join(',')).join('\n'), function(err) {
   if (err) {
   alert(err)
   }
  })
  }

  function showpic(data) {
  disc.innerhtml = data.disc
  image.src = data.image
  image.style.display = 'inline'
  list.style.display = 'none'
  while (list.haschildnodes()) {
   list.removechild(list.firstchild)
  }
  }

  function showblink(data) {
  disc.innerhtml = data.disc
  image.style.display = 'none'
  list.style.display = 'block'
  var spans = []
  for (var i = 0; i < data.count; ++i) {
   var span = document.createelement('span')
   list.appendchild(span)
   spans.push(span)
  }

  function doblink() {
   if (state == 'showblink') {
   names.sort(function() {
    return 0.5 - math.random()
   })
   for (var i = 0; i < data.count; ++i) {
    spans[i].innerhtml = names[i][0]
   }
   window.requestanimationframe(doblink)
   }
  }

  window.requestanimationframe(doblink)
  }

  function showlist(data) {
  disc.innerhtml = data.disc
  image.style.display = 'none'
  list.style.display = 'block'
  while (list.haschildnodes()) {
   list.removechild(list.firstchild)
  }
  for (var i = 0; i < data.list.length; ++i) {
   var span = document.createelement('span')
   span.innerhtml = data.list[i]
   list.appendchild(span)
  }
  }

  function nextstep() {
  var data = steps[step]
  if (state == 'showpic') {
   data.list = data.list || []
   if (data.list.length > 0) {
   state = 'showlist'
   showlist(data)
   } else {
   state = 'showblink'
   showblink(data)
   }
  } else if (state == 'showblink') {
   if (data.list.length > 0) {
   state = 'showlist'
   showlist(data)
   }
  } else if (state == 'showlist') {
   if (step < (steps.length - 1)) {
   ++step
   state = ''
   nextstep()
   }
  } else {
   state = 'showpic'
   showpic(data)
  }
  }

  function previousstep() {
  if (step > 0) {
   --step
  }
  state = ''
  nextstep()
  }

  function drawprize() {
  if (state == 'showblink') {
   var data = steps[step]
   names.sort(function (a, b) {
   if (a[1] <= data.level && b[1] > data.level) {
    return -1
   }
   return 0
   })
   var luck = names.splice(0, data.count)
   data.list = luck.map(x => x[0])
   saveconf()
   nextstep()
  }
  }

  document.addeventlistener('keydown', function(e) {
  e=e||window.event
  if (e.keycode == 56) {
   // 8
   reloadconf()
  } else if (e.keycode == 52) {
   // 4
   nextstep()
  } else if (e.keycode == 49) {
   // 1
   previousstep()
  } else if (e.keycode == 32) {
   // 空格
   drawprize()
  } else if (e.keycode == 70) {
   // f
   win.togglefullscreen()
  }
  })
  
  reloadconf(nextstep)
 </script> 
 </bdoy>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：暴风影音怎么给3D电影加字幕？

下一篇：暴风影音升级后不能播放REAL影音文件该怎么办？

200行HTML+JavaScript实现年会抽奖程序

200行HTML+JavaScript实现年会抽奖程序

python实现公司年会抽奖程序

php实现可以设置中奖概率的抽奖程序代码分享

jQuery+PHP+Mysql实现抽奖程序

python实现抽奖小程序

php抽奖小程序的实现代码

使用 SQL 语句实现一个年会抽奖程序的代码

基于PHP实现简单的随机抽奖小程序

C#模拟实现抽奖小程序的示例代码

C语言实现随机抽奖程序