javascript实现点击星星小游戏
本文实例为大家分享了JavaScript实现点击星星的具体代码,供大家参考,具体内容如下
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #d2{ width:100px; height:20px; border:1px solid red; display:inline-block; } #d3{ display:inline-block; background:yellow; height:20px; } </style> <script type="text/javascript"> <!-- var dingshiqi; //定时器 var count=0; //记录星星的个数 var n=0; //记录游戏时间的变量。 var sj; //时间定时器(解决一直按开始游戏bug) function StarGame(){ //开始游戏 window.clearInterval(sj); //清除时间定时器 window.clearInterval(dingshiqi);//清楚定时器 dingshiqi=window.setInterval("star()",400); sj=window.setInterval("shijian()",1000); } //创建星星 function star(){ var obj=document.createElement("img"); //给星星添加src属性 obj.src="image.png" //随机星星大小 var w=Math.floor(Math.random()*80+20); obj.width=w; obj.height=w; //随机位置 var x=Math.floor(Math.random()*1166+100); var y=Math.floor(Math.random()*500+100); obj.style.position="absolute"; obj.style.top=y+"px"; obj.style.left=x+"px"; //放到body中 document.body.appendChild(obj); //添加onclick点击事件(绑定的onclick 不需要加";") obj.οnclick=removeStar; //控制大于20个星星游戏结束 count++; var sp=document.getElementById("d3"); sp.style.width=count*5+"px"; if(count>20){ alert("大于20个星星游戏结束"); window.clearInterval(dingshiqi); location.reload(); //重新加载 } //放到body中 document.body.appendChild(obj); } //点击删除星星 function removeStar(){ this.parentNode.removeChild(this); count--; //点击星星删除,都要count-1. var sp=document.getElementById("d3"); sp.style.width=count*5+"px"; } //点击暂停游戏。 function zanting(){ alert("暂停游戏"); } //记录游戏时间的函数 function shijian(){ n++; var obj=document.getElementById("d1"); obj.innerHTML="游戏进行了"+n+"秒" } //--> </script> </head> <body> <input type="button" value="开始游戏" οnclick="StarGame()"> <input type="button" value="暂停游戏" οnclick="zanting()"> <span id="d1">游戏进行了0秒</span> <span id="d2"><span id="d3"></span></span> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
上一篇:java遇到微信小程序 "支付验证签名失败" 问题解决
栏 目:JavaScript
下一篇:vue实现移动端图片上传功能
本文标题:javascript实现点击星星小游戏
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9416.html
您可能感兴趣的文章
- 04-02javascript潜力,javascript强大吗
- 04-02javascript点线,点线的代码
- 04-02javascript移出,js 移入移出
- 04-02javascript替换字符串,js字符串的替换
- 04-02包含javascript舍的词条
- 04-02javascript匿名,js匿名方法
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript警报,JavaScript警告
- 04-02javascript前身,javascript的前身
- 04-02javascript遮盖,JavaScript遮盖PC端页面
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 01-10C#中split用法实例总结
- 04-02jquery与jsp,用jquery
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10SublimeText编译C开发环境设置
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10delphi制作wav文件的方法
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-11ajax实现页面的局部加载
- 01-10使用C语言求解扑克牌的顺子及n个骰子