零基础建网站,昆山网站建设义搏,微商营销技巧,seo站内优化包括HTML div classboxh3你的鼠标有多快#xff1f;/h3p游戏说明#xff1a;点击开始游戏#xff0c;随机掉下QQ表情#xff0c;点中它#xff0c;千万别让它掉下去#xff01;#xff01;/pinput typebutto… HTML div classboxh3你的鼠标有多快/h3p游戏说明点击开始游戏随机掉下QQ表情点中它千万别让它掉下去/pinput typebutton name id value开始游戏 /div classcontdiv classfenspan得分0分/spanspan失分0分/span/divdiv idgame/div/div
/div
script srcmTween.js typetext/javascript charsetutf-8/script
script srctween.js typetext/javascript charsetutf-8/scriptCSS body{background: #ccc;
}
*{margin: 0;padding: 0;
}.box{width: 800px;margin: 20px auto;text-align: center;
}
.cont{width: 100%;
}
.cont:after{display: block;clear: both;content: ;
}
p{line-height: 30px;
}
input{padding: 5px 10px;margin-bottom: 10px;
}
.fen{float: left;width: 150px;padding: 10px;border: 1px solid #000;border-right: 0;background: #EBB22B;text-align: left;
}
.fen span{display: block;
}
#game{width: 547px;height: 400px;border: 1px solid #000;float: left;background: #fff;position: relative;overflow: hidden;text-align: center;font-size: 30px;font-weight: bold;line-height: 400px;
}
#game i{position: absolute;top: 0px;left: 0;width: 20px;height: 20px;background: red;border-radius: 50%;
}JS var gamedocument.getElementById(game);
var Btndocument.getElementsByTagName(input)[0];
var aIsdocument.getElementsByTagName(i);
var aSpandocument.getElementsByTagName(span);
var num0;
var num10
var timernull;
var time13000;
var time22000;Btn.οnclickfunction(){//修改按钮文字this.value游戏进行中...;fn();timersetInterval(function(){fn();},time1)}function fn(){//生成掉落的圆点game.innerHTMLi styleleft: Math.round( Math.random()*520)px;/i;var lenaIs.length;for (var i0;ilen;i) {//圆点掉落mTween(aIs[i],top,400,time2,linear);mTween(aIs[i],left,Math.round( Math.random()*530),time2,linear,function(){//运动结束失分加1aSpan[1].innerHTML失分:(aIs.length-num)分;//当失分大于10之后游戏结束不在生成圆点if(aIs.length-num9){clearInterval(timer);Btn.value游戏结束;}});aIs[i].indexi;//鼠标移入清除运动aIs[i].οnmοuseοverfunction(){clearInterval(this[top]);clearInterval(this[left]);}//鼠标点击背景变为黑色左右抖动透明度变为0得分加1失分保持原先的值aIs[i].οnclickfunction(){var thatthis.index;num;this.style.background#000;shake(this,left,function(){aIs[that].style.opacity0;aSpan[0].innerHTML得分:num分;aSpan[1].innerHTML失分:(aIs.length-num)分;});}}//每次点击的圆点达到20个之后速度加快都缩短100msif(num%200){time1-100;time2-100;//当时间减为0并且失分少于10个之后游戏终止并清除定时器显示恭喜if(time10aIs.length-num9){time10;time20;game.innerHTML大神恭喜您通关了Btn.value游戏结束;clearInterval(timer);}}}//抖动函数
function shake(obj,attr,fn){var timernull;var arr[];for(var i20;i0;i-2){arr.push(i,-i);}arr.push(0);var num0;clearInterval(timer);timersetInterval(function(){var seepparseInt(getStyle(obj,attr))arr[num];num;obj.style[attr]seeppx;if(numarr.length){clearInterval(timer);if(fn){fn();}}},30)
}
//获取样式
function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj)[attr];}
}转载于:https://www.cnblogs.com/yangxue72/p/7998810.html
