8、Js DOM节点，星星案列

DOM节点：描述网页各个组成之间的关系

var.obj=document.getElementById("id名")；

火狐浏览器中的空白也算一个节点

ParentNode：父节点
childNode：子节点
firstChild：第一个子节点
lastNode：最后一个子节点
nextSibling：下一个姐妹或（兄弟）节点【注：必须是同父级关系】
previousSibling：前一个兄弟节点【注：必须是同父级关系】

案列：

星星案列

1、随机位置随即大小出现星星

<script type="text/javascript">
window.onload=init();
function init(){window.setInterval("start()",1000);}
function start(){//创建星星var obj=document.createElement("img");//给星星添加src属性obj.src="xingxing.gif";//随机星星大小var w=Math.floor(Math.random()*80+20);obj.width=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);}
</script>

2、点击星星让星星消失

绑定一个onclick事件

obj.οnclick=abcd 【对象.事件=事件处理函数】//函数不用加括号

注：要想删除某个节点，必须找到它的父节点

注：在绑定事件中，this可以直接使用

removeChild(obj)：删除obj

3、人为开始和暂停星星出现

删除顶部的”window.οnlοad=init();”

4、根据游戏规定星星最大个数截止游戏

var dingshiqi;
var count=0;
function init(){
   dingshiqi=window.setInterval("start()",1000);
   }
function start(){
   var obj=document.createElement("img");//创建星星
   obj.src="xingxing.gif";//给星星添加src属性
   //随机星星大小
   var w=Math.floor(Math.random()*80+20);
   obj.width=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";
   obj.οnclick=removeStar;//添加点击事件
   count++;
   if(count>=20){
       alert("游戏结束");
       window.clearInterval(dingshiqi);//关掉定时器
       location.reload();//重新加载启动游戏
       }
   document.body.appendChild(obj);//放到body中
   }
   //点击删除星星的函数
   function removeStar(){
       this.parentNode.removeChild(this);
       count--;//点击了的个数要减掉
       }
   //点击暂停游戏的函数
   function zanting(){
       alert("暂停游戏");
       }
</script>
</head>
<body>
<input type="button" value="开始游戏" οnclick="init()" />
<input type="button" value="暂停游戏" οnclick="zanting()" />
</body>

5、统计游戏时间

6、游戏进度条

<style type="text/css">
#d2{
   width:100px;
   border:1px solid red;
   display:inline-block;/*转化为行内块*/
   }
#d3{
   display:inline-block;
   background:#000;
   height:20px;/*根据未点击星星最大的个数设置*/
   }
</style>
<script type="text/javascript">
var dingshiqi;//定时器的名字
var time;//时间定时器名
var count=0;//记录星星个数的变量
var n=0;//就看时间的变量
function init(){
   window.clearInterval(time);
   window.clearInterval(dingshiqi);
   time=window.setInterval("shijian()",1000);//记录时间的函数
   dingshiqi=window.setInterval("start()",1000);
   }
function start(){
   var obj=document.createElement("img");//创建星星
   obj.src="xingxing.gif";//给星星添加src属性
   //随机星星大小
   var w=Math.floor(Math.random()*80+20);
   obj.width=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";
   obj.οnclick=removeStar;//添加点击事件
   count++;
   var sp=document.getElementById("d3");
   sp.style.width=count*5+"px";
   if(count>=20){
       alert("游戏结束");
       window.clearInterval(dingshiqi);//关掉定时器
       location.reload();//重新加载启动游戏
       }
   document.body.appendChild(obj);//放到body中
   }
   //点击删除星星的函数
   function removeStar(){
       this.parentNode.removeChild(this);
       count--;//点击了的个数要减掉
       var sp=document.getElementById("d3");
   sp.style.width=count*5+"px";
       }
   //点击暂停游戏的函数
   function zanting(){
       alart("暂停游戏");
       }
   function shijian(){
       n++;
       var obj=document.getElementById("d1");
       obj.innerHTML="游戏进行了"+n+"秒";
       }
</script>
</head>
<body>
<input type="button" value="开始游戏" οnclick="init()" />
<input type="button" value="暂停游戏" οnclick="zanting()" />
<span id="d1">游戏进行了0秒</span>
<span id="d2"><span d3></span></span>
</body>

8、Js DOM节点，星星案列相关推荐

d3中文案例_D3.js实现动态仪表盘案列
这次给大家带来D3.js实现动态仪表盘案列,D3.js实现动态仪表盘的注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了D3.js实现简洁实用的动态仪表盘的示例,分享给大家,具体如下: 动态 ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
JS DOM节点增删改查属性设置
一.节点操作增 createElement(name)创建元素 appendChild();将元素添加删获得要删除的元素获得它的父元素使用removeChild()方法删除改第一种方式: ...
js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...

8、Js DOM节点，星星案列

DOM节点：描述网页各个组成之间的关系

星星案列

8、Js DOM节点，星星案列相关推荐

最新文章

热门文章