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


Posted in Javascript onJanuary 22, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
javaScript基础详解
Jan 19 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php文件操作实例代码
2012/05/10 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
mac系统安装Python3初体验
2018/01/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
暑期研修感言
2014/02/17 职场文书
小学毕业寄语大全
2014/04/03 职场文书
出生公证委托书
2014/04/03 职场文书
学生请假条格式
2014/04/11 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
美丽心灵观后感
2015/06/01 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
redis 存储对象的方法对比分析
2021/08/02 Redis
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Python开发五子棋小游戏
2022/05/02 Python