javascript实现点击星星小游戏


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
JS实现简易留言板特效
Dec 23 #Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php获取淘宝分类id示例
2014/01/16 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
js tab 选项卡
2009/04/26 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
javascript的this关键字详解
2019/05/20 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python入门_条件控制(详解)
2017/05/16 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
社会实践活动总结
2015/02/05 职场文书
个人学习总结范文
2015/02/15 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers