1.javaScript 小案例

来源：互联网发布：淘宝客服平台语言技巧编辑：程序博客网时间：2024/05/19 14:37

innerHTML属性（不属于DOM的属性，但大多数浏览器都支持）

作用一：获取文本内容

作用二：向标签里设置文本内容，可以是html代码

一：动态显示时间

<body>
     <div id="aaa"><div>
 <script type="text/javascript">
   function fun(){ 
var date = new Date(); //获取当前时间
var time = date.toLocaleString();//格式化
var divNode = document.getElementById("aaa");
        divNode.innerHTML = time;//为div节点设置文本属性（即当前中国标准时间）
   }
   setInterval("fun()",1000); //setInterval 更新时间 1000ms更新一次
 </script>
 </body>

二：全选和全不选

<body>
     <!-- 我记得复选框不是这样写的？  那个是 下拉选择框 -->
     <input type="checkbox" id="cb1" onclick="fun0()"/>全选/全不选
 </br>
 <input type="checkbox" name="love">篮球<br/>
 <input type="checkbox" name="love">足球<br/>
 <input type="checkbox" name="love">排球<br/>
 <input type="checkbox" name="love">冰球<br/>
     
 <input type="button" value="全选" onclick="selall()"/>
     <input type="button" value="全不选" onclick="selno()"/>
 <input type="button" value="反选" onclick="selother()"/>
     <script type="text/javascript">
    function fun0(){
     var cb = document.getElementById("cb1");
             if(cb.checked==true){
     selall();
 }else{
     selno();
 }
 }
        function selall(){
 var nodes = document.getElementsByName("love");
 for(var i = 0; i < nodes.length; i++){  //遍历节点
     var node1 = nodes[i];
 node1.checked = true;   //把节点的checked属性设置为 true
 }
 }
        function selno(){
     var nodes = document.getElementsByName("love");
     for(var j = 0; j < nodes.length; j++){  //遍历节点
    //var node2 = nodes[j];
//node2.checked = false;
nodes[j].checked = false; //把节点的checked属性设置为 false
 }
 }
 </script>
</body>

三：下拉列表左右选择

 <body>
     <div style="float:left">
        <div>
<select id="sel1" multiple="multiple" style="width:100px;height:150px;" >
<option>西施</optipn>
<option>貂蝉</option>
<option>王昭君</option>
<option>杨玉环</option>
</select>
    </div>
<div>
<input type="button" value="add these to" onclick="addTheseTo();"/><br/>
<input type="button" value="add all to" onclick="addAllTo();"/>
</div>
    </div>
<div>
<select id="sel2" multiple="multiple" style="width:100px;height:150px;">
    <option>闭月</optipn>
<option>羞花</option>
<option>沉鱼</option>
<option>落雁</option>
</select>
</div>
    <script type="text/javascript">
    function addAllTo(){
    
            var sel1 = document.getElementById("sel1");
            var sel2 = document.getElementById("sel2");
var optionNodes = sel1.getElementsByTagName("option");
for(var i = 0; i < optionNodes.length;){
    
                /*
var option = optionNodes[i];
                sel2.appendChild(option);
i--;
*/
                sel2.appendChild(optionNodes[i]);
}
}
        
function addTheseTo(){    
            var sel1 = document.getElementById("sel1");
            var sel2 = document.getElementById("sel2");
var optionNodes = sel1.getElementsByTagName("option");
for(var i = 0; i < optionNodes.length; i++){
   var optionNode = optionNodes[i];
   if(optionNode.selected==true){
       sel2.appendChild(optionNode);    
   i--;
   }
}
} 
</script>
</body>

四：省市联动

<body>
     <select sel="sel1" onchange="fun(this.value);">
     <option >--请选择--</option>
     <option >中国</option>
     <option >美国</option>
 <option >德国</option>
 <option >日本</option>
 </select>
     <select id="sel2"></select>
     <script type="text/javascript">
         var arr = new Array(4);                     //二维数组 存储数据
      arr[0] = ["中国","北京","四川","杭州","台湾"];
 arr[1] = ["日本","东京","大阪","神户","广岛"];
 arr[2] = ["美国","华盛顿","底特律","休斯顿","纽约"];
 arr[3] = ["德国","慕尼黑","柏林","狼堡","法兰克福"];
         function fun(val){
             var sel2Node = document.getElementById("sel2");
             var optionNodes = sel2Node.getElementsByTagName("option");
 for(var m = 0; m < sel2Node.length;){ 
     var op2Node = optionNodes[m];
 sel2Node.removeChild(op2Node);
 }   //判断当前下拉框里有没有option结点，有则removeChild
             for(var i = 0; i < arr.length; i++){    
 var arrx = arr[i];
 if(arrx[0] == val){       //判断数组第一个元素是否是国家名
for(var j = 1; j < arrx.length; j++){
        var city = arrx[j];
var optionNode = document.createElement("option");
var cityNode = document.createTextNode(city); 
optionNode.appendChild(cityNode); //将数组中获取到的元素作为文本内容添加到创建的option节点中
sel2Node.appendChild(optionNode); //将option节点添加到下拉框2节点中  
 }
     }
 }        
 }
 </script>
</body>

五：动态生成表格

<body>
     行：<input id="row" type="text" />
 列：<input id="col" type="text" />
     <input type="button" value="生成表格" onclick="newTable()"/>
 <div id="divv"></div>
     <script type="text/javascript">
         function newTable(){
 var h = document.getElementById("row").value;  //获取行
             var l = document.getElementById("col").value;  //获取列
     var tab = "<table border='1' bordercolor='blue' cellspacing='0'>";   
                 for(var i = 0; i < h;     //通过行和列遍历 生成table
         tab+="<tr>";
     for(var j = 0; j < l; j++){
      tab+="<td>人应该学会博爱</td>";
 }
 tab+="</tr>";
     }
 tab+="</table>";
 //alert(tab);
             var divNode = document.getElementById("divv");  //获取div节点
 divNode.innerHTML = tab; //将tab设置为div节点的文本内容（innerHTML设置的内容可以是HTML代码）
 } 
 </script>
</body>

0 0