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 相关文章推荐
Javascript this 的一些学习总结
Aug 02 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
职工运动会邀请函
2014/02/02 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
公司新员工欢迎词
2015/09/30 职场文书
Python中22个万用公式的小结
2021/07/21 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Go web入门Go pongo2模板引擎
2022/05/20 Golang