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中eq和get的区别与使用方法
Apr 14 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js在HTML的三种引用方式详解
Aug 29 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的错误信息
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
AngularJS内置指令
2015/02/04 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python字典key不能是可以是啥类型
2020/08/04 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
文秘专业自荐信
2013/10/14 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
商业项目策划方案
2014/06/05 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Python max函数中key的用法及原理解析
2021/06/26 Python