JS抽奖程序

抽奖程序源文件来自于GITHUB项目^[1] 修改后上传至gitee.com/ISPZ/lotter…

原程序使用JS和Tagcanvas实现球形云，在此基础上进行微调

修改说明

1.修改球形及展示界面文字为图片显示球形云中的显示函数代码：

var createHTML = function(){
            var html = [ '<ul>' ];
            member.forEach(function(item, index){
                item.index = index;
                var key = getKey(item);
                var color = choosed[key] ? 'yellow' : 'white';
                html.push('<li>' +
                    '<a href="#" class="memeber" style="color: ' + color + ';">' +
                    '<img class="headAll" src="headImage/' + item.name + '.jpg" style="height:20px;width:20px;" />' +
                    // item.name +
                    '</a>' +
                    '</li>');
            });
            html.push('</ul>');
            return html.join('');
        };

抽奖界面：

抽中展示代码：

toggle: function(){
    if(this.running){
        TagCanvas.SetSpeed('myCanvas', speed());
        var ret = lottery(this.selected);
        if (ret.length === 0) {
            $('#result').css('display', 'block').html('<div><span>已抽完</span></div>');
            return
        }
        console.log(ret)
        let itemList = ''
        ret.forEach(item => {
            const html = '<div style="display: inline-block"> <img class="head" src=" headImage/' + item.split("<br/>")[0] + '.jpg" />' +
                    '<br/>' +
                    '<span>' + item + '</span> </div>'
            console.log(item.split("<br/>")[0])
            itemList += html
        })
        $('#result').css('display', 'block').html(itemList);
        TagCanvas.Reload('myCanvas');
        setTimeout(function(){
            localStorage.setItem(new Date().toString(), JSON.stringify(ret));
            $('#main').addClass('mask');
        }, 300);
    } else {
        $('#result').css('display', 'none');
        $('#main').removeClass('mask');
        TagCanvas.SetSpeed('myCanvas', [5, 1]);
    }
    this.running = !this.running;
}

抽中显示：

抽中显示

注：以下修改均在项目中
1.若需修改图像可直接将图片放在headImage中，之后在member.js中添加图片名称即可
2.修改背景图在img文件夹中，之后在wall.css中修改图像名称
3.修改球形云图像大小在tagcanvas.js中找到TagCanvas.options修改imageScale属性，其它属性可参考：TagCanvas options

生成可执行程序(.exe)教程

准备阶段

下载 nwjs（用于生成.exe）NW.js
下载 Enigma Virtual Box (用于打包.exe) Enigma Virtual Box
（可选）下载 Resource Hacker（用于修改.exe图标）Resource Hacker

nwjs

解压nwjs压缩包，将本文的项目放入到与nw.exe同级的文件夹下，配置package.json 可将其放到项目中或单独与nw.exe同级这里可以参考^[2,3]

package.json配置文件：

{"main":"index.html", //入口
  "name":"lottery",//字符串必须是小写字母或者数字，可以包含"." 或者"_"或者"-" ，不允许带空格,必须唯一
  "description":"demo app of node-webkit",//描述
  "version":"0.1.0",//版本
  "keywords":[ "demo", "node-webkit" ],//关键字
  "window":{//窗体配置
    "title":"lottery", //窗体的标题
    "icon":"gift.png",//窗体的ico图标
    "toolbar": true,//是否要工具栏
    // "frame": false,//bool值。如果设置为false，程序将无边框显示 也就是没有系统默认的关闭，最小化，全屏按钮
    // "width": 800,//窗口的大小
    // "height": 500, //窗口的大小
    // "position": "mouse", //字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。
    // "min_width": 400,//最小宽度
    // "min_height": 200,//最小高度
    // "max_width": 800,//最大宽度
    // "max_height": 600,//最大高度
    "as_desktop" :true,//是否作为桌面背景窗口显示
    "resizable":true,//是否允许调整窗口大小
    "always-on-top":true,//窗口是否置顶
    "fullscreen":true,//是否全屏显示 
    "show_in_taskbar":true,//是否显示任务栏图标 
    "show":true, //如果设置为false，启动时窗口不可见
    "kiosk":false //是否使用kiosk模式。如果使用kiosk模式，应用程序将全屏显示，并且阻止用户离开应用
 
}}