js- html5 - 彩票

需求: 随机从35 个数中随机取出7个不相等的数; 可以查看历史记录

1. 方式1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="随机选择" id="input1"/>
<div id="div1"></div>
</body>
<script>
    window.onload = function(){
        var oBtn = document.getElementById(‘input1‘);
        var oDiv = document.getElementById(‘div1‘);
        var json = {};//映射关系用
        oBtn.onclick = function(){
            var num = Math.random();
            var arr = randomNum(35, 7);
            json[num] = arr;//数组映射到json对象中
            oDiv.innerHTML = arr;
            window.location.hash = num;//改变hash值
        };
        window.onhashchange = function(){
            //http://localhost:63342/js/caipiao.html#0.4086829614825547
            oDiv.innerHTML = json[window.location.hash.substring(1)];//去掉#号
        }
        function randomNum(iAll, iNow){
            var arr = [];
            var newArr = [];
            for(var i = 1; i <= iAll; i++){
                arr.push(i);//1-35存到数组arr
            }
             for(var i = 0; i <= iNow; i++){ //取7个
                var index = Math.floor(Math.random()*arr.length);
                newArr.push(arr.splice(index, 1));//每次根据下标剪切一个数到新数组中,所以永远不会重复
             }
            return newArr;
        }
    }
</script>
</html>

方式二: 必须在服务器上写代码

<script>
    window.onload = function(){
        var oBtn = document.getElementById(‘input1‘);
        var oDiv = document.getElementById(‘div1‘);
        oBtn.onclick = function(){
            var arr = randomNum(35, 7);
            oDiv.innerHTML = arr;
            history.pushState(arr, ‘‘,Math.random()*100);//存数据, Math.random()*100王志发生变化,不要也可以
        };
        window.onpopstate = function(ev){
            oDiv.innerHTML = ev.state;//取数据
        }
        function randomNum(iAll, iNow){
            var arr = [];
            var newArr = [];
            for(var i = 1; i <= iAll; i++){
                arr.push(i);//1-35存到数组arr
            }
            for(var i = 0; i <= iNow; i++){ //取7个
                var index = Math.floor(Math.random()*arr.length);
                newArr.push(arr.splice(index, 1));//每次根据下标剪切一个数到新数组中,所以永远不会重复
            }
            return newArr;
        }
    }
</script>

  

时间: 2024-11-11 18:20:17

js- html5 - 彩票的相关文章

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

js html5 仿微信摇一摇

看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p>用力摇一摇你手机</p> <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src=&q

js html5 sortTable排序

/**! * Sortable * @author * @license MIT */ (function (factory){ "use strict"; if( typeof define === "function" && define.amd ){ define(factory); } else if( typeof module != "undefined" && typeof module.export

如何写高质量的JS, Html5前端代码

Sencha's Guide to JavaScript Style and Best Practices Sencha's Guide to JavaScript Style and Best Practices The following document contains a series of best practices and recommendations for building enterprise web applications with JavaScript and HT

【panda.js】panda.js html5游戏引擎入门介绍

一.官网 http://www.pandajs.net/ 二.主要特性 使用高速图形渲染 pixi.js 使用粒子引擎(Particle engine)制作特效 缓动(Tweening) 物理引擎(Physics engine) 定时器(Timer) 移动端支持 声效管理 模块化(Modules)的方式组织你的源代码 三.安装 请先安装node.js,再通过npm安装pandatool: $ npm install -g pandatool 四.新建并构建项目 $ panda create pa

JS 模拟彩票

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12 </head> 13 <body>

JS html5 操作SQLite

//执行查询 $("#btnSQL").tap(function(){ <span style="white-space:pre"> </span>var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { <span style="white-space:pre"> </

学HTML5必须要学JS吗

学习html5的话,如果你是想作为一个前端人员的话,js是必须要学的,这里我给你一些建议: 1.学习目录:html >> css >> js >> html5 >> css3(书籍的话,我建议你<Head First HTML and CSS>这本书还是蛮不错的, 2.进阶:学js的时候建议视频和书配套,视频主入门,书主细节.深入: 3.学习方法:至于html和css可以看看视频学习,初期学习不一定要求那么高,要精通,有大概的映像就行,在后面学习

html5.js让IE(包括IE6)支持HTML5元素方法

引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> < ![endif]--> 将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效) 当然,你也可以把代码拿出来自己看着办:html5.js /* HTML5 Sh

Html5培训之精髓

一.核心技术(可去各技术官网学习) 1.html5的六大核心技术:Html5,CSS3,JavaScript,WebSocket,PhoneGap,Node.js,它们覆盖了设备端,浏览器端和云端的开发,可作为一套技术系统. 2.做Web开发要学好JavaScript和设计模式,讲师(就是王家林本人)推荐的JS教材<JavaScript框架设计>司徒正美 著,<JavaScript设计模式>(美)哈梅斯,(美)迪亚斯 著,建议读英文版. 3.王家林讲师对我们人生的建议: 1)每天最