老虎机
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="gb2312">
- <title > 老虎机 </title>
- <style type="text/CSS">
- * {
- padding: 0;
- margin: 0;
- }
- .container {
- width: 32rem;
- height: 32rem;
- border:1px solid #000;
- margin: 5rem auto 0;
- }
- table {
- height: 100%;
- width: 100%;
- }
- tr {
- width: 100%;
- height: 8rem;
- }
- td {
- width: 25%;
- height: 8rem;
- }
- img {
- width: 100%;
- height: 100%;
- display: block;
- }
- .img1 {
- background: #dedede;
- }
- .img2 {
- background: blue;
- }
- .img3 {
- background: green;
- }
- .img4 {
- background: yellow;
- }
- .img5 {
- background: gray;
- }
- .img6 {
- background: red;
- }
- .focus {
- font-size: 68px;
- background: #000;
- font-weight: 700;
- text-align: center;
- line-height: 16rem;
- color: #fff;
- cursor: pointer;
- }
- .move {
- background: #000;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <table cellpadding="0" cellspacing="0">
- <tr>
- <td class="img1" prize="感谢参与!"><img src="js.png" /></td>
- <td class="img2" prize="恭喜获得 ipad!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302ewusy5sshb5q1ezp.png" /></td>
- <td class="img3" prize="感谢获得耳机!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302w4afu6qwu6enet4j.png" /></td>
- <td class="img4" prize="感谢获得鞋子!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140301se0iw0rkr08eqef0.png" /></td>
- </tr>
- <tr>
- <td class="img5" prize="感谢获得手机!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302d059co578cboewy7.png" /></td>
- <td colspan="2" rowspan="2" class="focus" id="start"> 点我 </td>
- <td class="img6" prize="感谢获得布娃娃!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302dkkda9uw2fd7i9d9.png" /></td>
- </tr>
- <tr>
- <td class="img4" prize="感谢获得鞋子!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140301se0iw0rkr08eqef0.png" /></td>
- <td class="img3" prize="感谢获得耳机!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302w4afu6qwu6enet4j.png" /></td>
- </tr>
- <tr>
- <td class="img5" prize="感谢获得手机!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302d059co578cboewy7.png" /></td>
- <td class="img2" prize="恭喜获得鞋子!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140301se0iw0rkr08eqef0.png" /></td>
- <td class="img6" prize="感谢获得布娃娃!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140302dkkda9uw2fd7i9d9.png" /></td>
- <td class="img1" prize="感谢参与!"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/01/140301d179h2yuhu1b8bv7.png" /></td>
- </tr>
- </table>
- </div>
- <script type="text/javascript">
- var startNum = 0;
- document.querySelector('#start').onclick = function() {
- running();
- };
- function running() {
- var runing = false;
- if ( runing === false ) {
- runing = true;
- var td = document.getElementsByTagName('td');
- var length = td.length ;
- randomLength = random( 2*length , 3*length );
- var num = startNum;
- var speed = 50;
- var flag = true;
- var timer = setInterval(function() {
- for(var i = 0; i <length ; i++ ) {
- td[i].style.background = "";
- //td[i].firstChild.src = '';
- }
- td[num].style.background = '#000';
- //td[num].firstChild.src = '伊可. gif';
- if( speed> randomLength * 20) {
- clearInterval(timer);
- flag = true;
- num === 1 ? num = 2 : '';
- startNum = num;
- runing = false;
- alert(td[num].getAttribute('prize'));
- }
- if( num === 3 ) {
- num += 3;
- } else if( num === 6) {
- num += 2;
- } else if( num === 8) {
- num += 4;
- } else if(num>= 10 && num <= 12 ) {
- num --;
- } else if( num === 9) {
- num -= 2;
- } else if( num === 7) {
- num -= 3;
- } else if( num === 4) {
- num -= 4;
- }
- else {
- num ++;
- }
- if(speed> 0 && flag === true) {
- speed -= 10;
- } else {
- flag = false;
- speed += 20;
- }
- console.log(speed)
- },speed);
- } else {
- return false;
- }
- }
- function random(min , max) {
- return Math.floor(min + Math.random() * ( max - min));
- }
- </script>
- </body>
- </html>
随机发货记录
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gbk" />
- <title>js 随机生成滚动发货记录 </title>
- <style type="text/css">
- *{ margin:0; padding:0;}
- body { font:12px/1.8 Arial; color:#666;}
- h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
- li{ list-style:none;}
- .wrapper {padding:50px;}
- ul, li {margin:0;padding:0;list-style:none;font-size:12px;}
- </style>
- <body>
- <h1 class="tit-h1">js 随机生成滚动发货记录 </h1>
- <div class="wrapper">
- <script>
- // 公告滚动
- var tt1;
- function start(){
- demo=document.getElementById("xdemo");
- demo1=document.getElementById("xdemo1");
- demo2=document.getElementById("xdemo2");
- if(demo2==null){
- return;
- }
- ShowNum();
- clearTimeout(tt1);
- demo2.innerHTML=demo1.innerHTML;
- function mar(){
- if(demo.scrollTop>=demo2.offsetHeight){
- demo.scrollTop=0;
- }else{
- demo.scrollTop++;
- }
- }
- var tt2=setInterval(mar,20);
- demo.onmousemove=function(){//demo.onmouseover
- clearInterval(tt2);
- }
- demo.onmouseout=function(){
- tt2=setInterval(mar,20);
- }
- }
- tt1=setTimeout(start,1000);
- // 随机返回数组中的某个值
- function CreateRecord(obj){
- return obj[Math.floor(Math.random()*obj.length)];
- }
- // 取得当前日期 格式 yyyy-MM-dd
- function GetNowTime(){
- var nowtime=new Date();
- var nowstr=nowtime.getFullYear()+"-";
- var nowmonth=nowtime.getMonth()+1;
- if(nowmonth<10){
- nowmonth="0"+nowmonth;
- }
- var nowdate=nowtime.getDate();
- if(nowdate<10){
- nowdate="0"+nowdate;
- }
- nowstr+=nowmonth+"-"+nowdate;
- return nowstr;
- }
- // 返回字符串
- function ShowNum(){
- var mycars=new Array("张小姐","钟小姐","潘小姐","梁先生","吕小姐","傅小姐","曹小姐","冯小姐","魏小姐","郭先生",
- "金小姐","张先生","5 小姐","黄小姐","余小姐","顾先生","胡小姐","万小姐","欧小姐","魏先生","宋小姐","曲小姐",
- "田先生","孟小姐","龙小姐","方先生","蒲先生","冉小姐","穆小姐","吴小姐","赵小姐","姚小姐");
- var mycars2=new Array("安徽马鞍山市","山东滨州市","辽宁沈阳市","江西南昌市","湖南张家界市","湖北天门市","黑龙鸡西市","河北邢台市",
- "浙江省绍兴市","辽宁省沈阳市","浙江省温州市","江苏省连云港","河南省郑州市","重庆市南川区","吉林省长春市","山东省烟台市","海南省海口市",
- "广东省东莞市","山西省太原市","辽宁省沈阳市","广西河池市","广东肇庆市","甘肃天水市","福建莆田市","北京门头沟","陕西铜川市");
- var mycars1=new Array("13","15","18");
- var str="<ul>";
- for(var i =0;i<mycars.length;i++){
- var ph1=Math.floor(Math.random()*10);
- str+="<li>"+CreateRecord(mycars)+CreateRecord(mycars1)+ph1+"****"+ReturnPhone()+""+CreateRecord(mycars2)+GetNowTime()+" 已发货 </li>";
- }
- str+="</ul>";
- document.getElementById("xdemo1").innerHTML=str;
- }
- // 电话后 4 位的生成
- function ReturnPhone(){
- var mastr=Math.floor(Math.random()*10000);
- if(mastr<=1000){
- mastr=ReturnPhone();
- }
- return mastr;
- }
- </script>
- <div id='xdemo' style="overflow: hidden; height:400px; width:210px;margin:0 auto;">
- <div id='xdemo1'></div>
- <div id='xdemo2'></div>
- </div>
- </div>
- </body>
- </html>
未完待续...
来源: http://www.qdfuns.com/article/27225/2a8da34f2eb4206e3aa38790a40fcf3e.html