首页 > 代码库 > 子节点的应用

子节点的应用

2024-08-28 06:33:33   225人阅读

创建一个新的节点：

1 <script type="text/javascript">
2  var newNode=document.createElement("div");
3  newNode.className="content";
4  newNode.innerHTML="这是一个新创建的节点";
5  </script>
?使用appendChild(node)将指定的节点追加到现有子节点的末尾。 
 1  <input type="button" value="http://www.mamicode.com/添加" onclick="insertNode()" />
 2  <script type="text/javascript">
 3  var newNode=document.createElement("div");
 4  newNode.className="content";
 5  newNode.innerHTML="这是一个新创建的节点";
 6  function insertNode(){
 7      //增加body标签的子节点
 8      document.body.appendChild(newNode);
 9  }
10  </script>

制作一个猜数字的游戏：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title>猜数字游戏</title>
 8         <style type="text/css">
 9             #title{
10                 margin: 0 auto;
11                 position: relative;
12                 left: 20px;
13             }
14             #result{
15                 height: 400px;
16                 width: 600px;
17                 margin: 0 auto;
18                 border: 1px solid gray;
19             }
20             div{
21                 margin:0 auto;
22                 margin-top:20px ;
23                 height: 50px;
24                 width: 400px;
25             }
26         </style>
27         <script src="http://www.mamicode.com/js/caishuzi.js" type="text/javascript" charset="utf-8"></script>
28         
29     </head>
30     <body onl oad="reload()">
31         <div id="title">
32             <h1>欢迎您参加测数字游戏</h1>
33         </div>
34         <div id="result">
35             <div id="text0" class="txt">
36                 你的猜测结果是：
37             </div>
38             
39         </div>
40         <div>
41             <span>请输入你猜测的数字：</span>
42             <input type="text" name="" id="number" value="" />
43             <input type="button" id="btn1" value="http://www.mamicode.com/确认" onclick="vertifyNum()"/>
44         </div>
45     </body>
46 </html>

 

//设定一个随机数
var testNum = Math.random();
testNum = Math.floor(testNum*100);
//猜测的次数i
var i = 1;
//判断输出的数是否与设定的随机数相等，
//1、若相等，输出“恭喜您，猜对了”，并将确认键变为不可用
//2、若不相等，输出“第i次猜测，猜测的数字偏大”/“第i次猜测，猜测的数字偏小”
//3、当猜测的次数达到第五次，并且全部猜错时，输出“对不起您的机会已经用完了，欢迎下次再来”
//并且使得确认键不可用

function vertifyNum () {
    //获取输入的数字，并赋值给num
    var num = document.getElementById("number").value;
    //获取添加内容所在的父节点
    var obj = document.getElementById("result");
    if(num == testNum){                    //判断输入的数字num是否与设定的随机数testNum相等，若相等，输出"恭喜您，在第"+i+"次，您猜对了"，并使“确认键”不可用。
        var newNode = document.createElement("div");
        obj.appendChild(newNode);        //将输出元素添加为提供输出位置的子节点
        newNode.id = "text" + i;
        newNode.style.color = "firebrick" //输出字体的颜色
        newNode.innerHTML = "恭喜您，在第"+i+"次，您猜对了";
        document.getElementById("btn1").disabled = "disabled";  //使得“确认键”不可用
    }else if (num > testNum) {
        var newNode = document.createElement("div");        //判断输入的数字num是否大于testNum，若是，输出“"对不起，您猜大了！您现在是第"+i+"次猜测错误了！"“
        obj.appendChild(newNode);                            //将输出元素添加为提供输出位置的子节点
        newNode.id = "text" + i;
        newNode.style.color = "red"
        newNode.innerHTML = "对不起，您猜大了！您现在是第"+i+"次猜测错误了！"
        if (i == 5) {                                        //判断输出的次数是否为5，如果是，使得”确认键“不可用
            document.getElementById("btn1").disabled = "disabled";
        }
        i++;
    } else{                            
        var newNode = document.createElement("div");        //判断输入的数字num是否大于testNum，若是，输出“"对不起，您猜小了！您现在是第"+i+"次猜测错误了！"“
        obj.appendChild(newNode);                            //将输出元素添加为提供输出位置的子节点
        newNode.id = "text" + i;
        newNode.style.color = "red"
        newNode.innerHTML = "对不起，您猜小了！您现在是第"+i+"次猜测错误了！"
        if (i == 5) {                                        //判断输出的次数是否为5，如果是，使得”确认键“不可用
            document.getElementById("btn1").disabled = "disabled";
        }
        i++;
    }
}

//页面刷新时使得，页面回复
function reload () {
    document.getElementById("btn1").disabled = "";
    i = 1;
}

 


 

子节点的应用


联系
我们