关于中午去哪吃饭的CSS+JS的简单应用！

首先来说这是一个非常有趣的应用，是关于中午去哪吃饭的。相信大家经常为了中午的美餐犯愁不知道去哪吃饭！不错就下来就看看下面的实例吧！他会为你随机挑选一个地方吃饭。来试试吧！

先看看效果图：

先看IE的吧：

再看看在google浏览器下的效果！

如果是吃饭时间到了：大家就来试试吧！

可以修改自己经常去吃饭的地方在运行代码的！css3效果需要特定浏览器！咕~~(╯﹏╰)b

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于中午去哪吃饭的CSS+JS的简单应用！</title> <script language="javascript"> var alldata = "这里修改,喜欢吃饭的地方,新中关,欧美汇,避风塘,牛魔王,小豆,即品面饭" //在本行修改吃饭地点 var alldataarr = alldata.split(",") var num = alldataarr.length-1 var timer function change(){ document.getElementById("oknum").value = alldataarr[GetRnd(0,num)]; } function start(){ clearInterval(timer); timer = setInterval('change()',30); } function ok(){ clearInterval(timer); } function GetRnd(min,max){ return parseInt(Math.random()*(max-min+1)); } document.onkeydown=key function key(e) { var e=e||event; if (e.keyCode==83) start(); if (e.keyCode==79) ok(); } </script> <style> .button { -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; font-family: "myriad-pro-1","myriad-pro-2"; line-height: 1.4; background-color: #49a7f3; display: inline-block; padding: 12px 20px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; color: white; text-decoration: none; border: none; font-size: 22px; font-weight: bold; outline:0;} .button:hover { background-color: #82c7ff;outline:0; cursor: pointer} .button:active { -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);outline:0;} .choose { background-color: #41d05f; padding:8px 16px;width:230px;} .choose:hover { background-color: #41d05f; cursor: help} button::-moz-focus-inner{border-color:transparent!important;} span{font-size:12px; float:right; color:#333;font-family:Verdana, Arial, Helvetica, sans-serif;} span a{color:#333;text-decoration: none;} </style> </head> <body> <p> <input type="text" id="oknum" name="oknum" value="去哪吃呢？" class="button choose"> </p> <p> <button onclick="start()" accesskey="s" class="button">开始选地(<U>S</U>)</button> <button onclick="ok()" accesskey="o" class="button">停(<U>O</U>)</button> </p> <span>code by <a href="http://uicss.cn/">cuikai-CSS库吧转载自崔凯的博客</a></span> </body> </html>
//提示：您可以先修改部分代码再运行

CSS库吧

关于中午去哪吃饭的CSS+JS的简单应用！

搜索

热门标签