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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
VueJS实现用户管理系统
May 29 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php命令行写shell实例详解
2018/07/19 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
决心书标准格式
2014/03/11 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
初二数学教学反思
2016/02/17 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript