https://www.zwcsm.com/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中午吃什么？</title> <style type="text/css"> html { display: block; } head { display: none; } body { height: 100%; width: 100%; color: #333; font-size: 12px; font-family: 'microsoft yahei', Microsoft YaHei, STXihei, SimHei, SimSun, sans-serif; position: absolute; top: 0; left: 0; margin: 0; padding: 0; overflow: hidden; } div { display: block; } #fs-login-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } #fs-login-scalebg { overflow: hidden; } #fs-login-glass { filter: Alpha(opacity=60); opacity: 0.7; background: #ffffff; border: solid 1px #e0e2e7; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } #fs-login-content { position: relative; padding: 0 45px; } #fs-login, #fs-login-glass, #fs-login-scalebg { position: absolute; margin-top: -271px; margin-left: -397px; left: 50%; top: 50%; width: 800px; height: 500px; } #fs-login-title { text-align: center; height: 60px; line-height: 75px; font-size: 20px; } .west{ width:350px; height:350px; float:left; /* border:solid 1px #e0e2e7; */ border:solid 1px ; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } .east{ width:350px; height:350px; float:right; border:solid 1px ; overflow-x:hidden; overflow-y:scroll; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } .east_box{ margin-top:15px; width:350px; height:321px; padding: 10px 10px 10px 10px; /* font-size: 47px; */ /* font-weight: bold; */ /* border:solid 1px ; */ } .list{ list-style-type: none; font-size: 24px; font-weight: bold; } .list ul{ } .list ul li{ margin-top: 10px; } .south{ width:709px; height:100px; float:right; border:solid 1px #e0e2e7; -moz-border-radius: 2px; /* Gecko browsers */ -webkit-border-radius: 2px; /* Webkit browsers */ border-radius:10px; /* W3C syntax */ } #dice{ height:100px; margin: auto; } #dice_show1{ width:100px; height:100px; margin-top:15px; border: 1px solid #e0e2e7; float:left; margin:5px 5px 5px 5px; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } #dice_show2{ width:100px; height:100px; margin: auto; margin-top:15px; border: 1px solid #e0e2e7; float:left; margin:5px 5px 5px 5px; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } #msg_show{ height:234px; margin: auto; margin-top:15px; border:solid 1px ; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } #msg_show_box{ height:187px; margin: auto; margin-top:15px; padding: 10px 10px 10px 10px; font-size: 47px; font-weight: bold; /* border:solid 1px ; */ } .static{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/static.jpg); background-repeat: no-repeat; background-position: -36px -39px; } .dynamic1{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: -1px -107px; } .dynamic2{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: -113px -92px; } .dynamic3{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: -210px -83px; } .dynamic4{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: -176px 1px; } .dynamic5{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: -90px -4px; } .dynamic6{ background: url(http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/dynamic.jpg); background-repeat: no-repeat; background-position: 1px -11px; } .btn-a{ width:100px; display: block; height: 42px; margin-top: 10px; background: #007aff; color: #ffffff; text-align: center; line-height: 42px; font-size: 18px; cursor: pointer !important; text-decoration: none; outline: none; -moz-border-radius: 2px; /* Gecko browsers */ -webkit-border-radius: 2px; /* Webkit browsers */ border-radius:2px; /* W3C syntax */ float: left; margin-left: 15px; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" > var data_arr = new Array(); data_arr.push({"code":"1","name":"清真牛肉馅饼"}); data_arr.push({"code":"2","name":"吉祥混沌"}); data_arr.push({"code":"3","name":"排骨饭"}); data_arr.push({"code":"4","name":"炒菜"}); data_arr.push({"code":"5","name":"五香焖面馆"}); data_arr.push({"code":"6","name":"鸡架饭"}); data_arr.push({"code":"7","name":"粥店"}); data_arr.push({"code":"8","name":"简餐"}); data_arr.push({"code":"9","name":"老太太罐饭"}); data_arr.push({"code":"10","name":"熏肉大饼"}); data_arr.push({"code":"11","name":"米线店"}); data_arr.push({"code":"12","name":"笑子包子"}); var d1=1; var d2=1; jQuery(function($){ var list_arr = new Array(); $.each(data_arr,function(i,o){ var code = o.code; var name = o.name; list_arr.push('<li>' + code + name +'</li>'); }); $('.list').html(list_arr.join("")); // 随机骰子数1 var random_dice_1 = function(){ // Math.random()*(n-m)+m // 返回指定范围的随机数(m-n之间)的公式 // 并取整 var random_num = Math.ceil(Math.random()*(6-1)+1); d1 = random_num; $('#dice_show1').removeClass(); var rnn = "dynamic" + random_num; $('#dice_show1').addClass(rnn); } // 随机骰子数1 var random_dice_2 = function(){ // Math.random()*(n-m)+m // 返回指定范围的随机数(m-n之间)的公式 // 并取整 var random_num = Math.ceil(Math.random()*(6-1)+1); d2 = random_num; $('#dice_show2').removeClass(); var rnn = "dynamic" + random_num; $('#dice_show2').addClass(rnn); } // 开始 $('#btn_start').on('click',function(){ //alert("开始"); interval_id_1 = window.setInterval(random_dice_1,100); interval_id_2 = window.setInterval(random_dice_2,100); }); // 停止 $('#btn_stop').on('click',function(){ //alert("停止"); window.clearInterval(interval_id_1); window.clearInterval(interval_id_2); var _random_num = d1 + d2; var rnn = _random_num-1; var data_obj = data_arr[rnn]; $('#msg_show_box').html(_random_num + "点 " +data_obj.name); }); // 重置 $('#btn_reset').on('click',function(){ // alert("重置"); window.location.reload(true); }); }); </script> </head> <body> <div id="fs-login-background"> <img class="fs-login-img" src="http://sandbox.runjs.cn/uploads/rs/134/1smx9ijg/login_bg.png" alt="" galleryimg="no" border="0" style="margin-left: 0px; margin-top: 0px; width: 1280px; height: 720px;" /> </div> <div id="fs-login"> <div id="fs-login-glass"></div> <div id="fs-login-content" > <div class="west"> <div id="dice" > <div id="dice_show1" class="static" ></div> <div id="dice_show2" class="static" ></div> </div> <div id="msg_show" > <div id="msg_show_box"> </div> </div> </div> <div class="east"> <ul class="list"> </ul> </div> <div class="south"> <div style="width:400px; margin: auto; margin-top: 21px;"> <a id="btn_start" class="btn-a" href="javascript:void(0);" data-type="0" >开始</a> <a id="btn_stop" class="btn-a" href="javascript:void(0);" data-type="1" >停止</a> <a id="btn_reset" class="btn-a" href="javascript:void(0);" data-type="1" >重置</a> </div> </div> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 中午吃什么？ 喜欢 (2)or分享 (0)
