一个活动抽奖小程序

大过年的,最开心的就是年会抽奖了。最不开心的,就是写了抽奖程序自己竟然没有中奖,泪~~~~~

这是一个使用 HTML 写的抽奖小程序,服务端使用的是 Nodejs。

Gihtub 库:https://github.com/Mobile-Team/ecd-lottery

环境要求

因为使用了 localStorage 记录抽奖数据,需要 IE8 , FF3.5 , Chrome4.0 , Safari4

Nodejs 版本没有要求。

WEB 端

数据定义

  1. /web/data/thing.js ,定义奖品数据,ID 从 1 开始自增。
  2. /web/data/user.js ,定义大奖池,en online casino 为英文名,在 /web/images/avatar 里要有对应有头像文件
  3. /web/images/animate 下扔一些头像切换效果的动画,文件命名为 1 开始自增

操作使用

  1. 方向左右键切换奖品,按空格开始停止摇奖。
  2. 摇奖后,如果有需要,可以点击某个人的头像,对他进行重新抽奖。

服务端说明

/server 是一个简单的 nodejs 服务端,用来记录抽奖结果

使用前,需要安装相关依赖包

$ cd server
$ npm install

运行之

$ cd server
$ node app.js

/web/assets/js/kalok.js 第一行可以配置服务端的URL

为避免不法分子在抽奖过程中捣蛋行为,服务器的 app.js 30 到 39 行有一个简单的用户验证,WEB 端配置 index.html 的第 8 行。

移动端页面点击出现色块解决方法

页面中使用<a>标签制作按钮时经常用伪类:active实现按钮按下之后反馈样式的展现。 在PC端,这种方法效果明显,但在移动端情况却不一样。 安卓系统下点击按钮,按钮上会浮现默认蓝色透明高亮色块,且不会展现设置的反馈。 苹果系统下点击按钮,按钮上会浮现默认黑色透明高亮色块,且不会展现设置的反馈。 这里就要使用控制高亮显示的属性了,即: -webkit-tap-highlight-color
它可以重设链接点击的高亮反馈,例如:

-webkit-tap-highlight-color:rgba(255, 0, 0, 0.5);
就是将高亮反馈设置为半透明的红色浮层。 要消去这种效果的方法是: online casino

html{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
如此,就可保证整个页面内,以

<a>标签制作的按钮在移动端点击时,默认的高亮消失。 需要注意的是,此时,Android系统中,点击按钮会依照设置的反馈样式显示,但在iOS系统中则只是默认高亮消失,不会显示反馈样式。

WebAPP ViewPort iPhone5 黑边解决方案

ViewPort 详解

最好先仔细看一遍苹果官方文档 

Configuring the Viewport 容易被忽略的就是即使 width=640的时候,scale=1是按照device-width而不是按照640的大小

举一个栗子: iPhone 的 device-width 等于320,如果我设置 width=640,scale=1

那么一坨 160px 宽的容器实际上会显示成一半屏幕那么宽
而不是以640作为scale=1的基数,显示成1/4屏幕宽

Continue reading

缩进, Tab 还是空格?

TabsSpacesBoth

圣战

圣战个毛线

Android 好还是 iOS 好,Windows 好还是 Mac 好,编辑器好还是 IDE好,中划线好还是下划线好…
写代码这么多年,会遇到很多奇葩的毫无意义的所谓脑残粉的争论

昨天 @willerce 同学刚入职就提了个问题: 缩进用 Tab 还是空格的规范貌似没有啊?
大家突然意识到有这个问题…至少证明这不是啥大问题,或者算还没暴露出来的小问题
甚至…因为统一用 IntelliJ IDEA 自动被解决了还蒙在鼓里

随着深入的学习,发现了还是有讲究的…

Continue reading

npm 无法正常update原因及解决方案

metersgrunt-hellosprite 一直有更新,但在项目里通过npm自带的update无法实现自动升级,而且既没有提示,也没有报错,只能删除node_modules目录后,重新 npm install 安装所有最新版本的依赖模块,这无疑让本该顺畅的自动化流程不那么尽如人意。 为了解决这一问题,在安装了较低版本的 grunt-hellosprite 后,我尝试了以下几个方法来更新: Continue reading

iOS7自带字体下载

ios7_fonts

best online casino alt=”ios-7-dynamic-type” src=”http://tmt.io/wp-content/uploads/2013/06/ios-7-dynamic-type.jpg” width=”320″ height=”568″ />

iOS首屏默认字体(en)是 Helvetica Nueue Ultra Light 下载地址:

http://fontscore.com/fonts/Helvetica-Neue-LT-Std-25-Ultra-Light_22508.html 对应的中文字体是:华文黑体 – Thin (暂时未放出)

STHeitiSC-Thin 下载地址: http://iosfonts.com/

BUG 收集

Android 版本 2.3 background-size 必须要-webkit Android 版本 4 1. fix和transform不能同时搞(http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ ) 2. fix 之后图片模糊… 3. input设置了行高之后会缩到左上角bug-line-height   iOS 出键盘的时候所有position:fixed的东西都会同absolute

viewport_bug

导致 解决方案: online casino


Android 2.3 -webkit-border-radius 不支持 % 单位。
在 ios 6.0 上,元素同时存在阴影、边框、圆角时,圆角50%不圆,需要添加了额外的 div 包裹。