主要学习了MOD模型:
先是改变HTML内容:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
5 <title>MOD_改变HTML内容</title>
6 <meta name="keywords" content="关键字列表" />
7 <meta name="description" content="网页描述" />
8 <link rel="stylesheet" type="text/css" href="" />
9 <style type="text/css"></style>
10
11 </head>
12 <body>
13 <h1 id = "_header">Old Header</h1>
14 <p id = "p1">Hellow World</p>
15 <script type="text/javascript">
16 //修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
17 document.getElementById("p1").innerHTML="New Text.";
18 var _element = document.getElementById("_header");
19 _element.innerHTML = "New Header";
20 </script>
21 </body>
22 </html>
效果如图:
=========================================
接下来学习了DOM改变HTML属性:
1 <body>
2 <img id = "image" src = "Images/00.jpeg">
3 <script type="text/javascript">
4 document.getElementById("image").src = "Images/2.jpg";
5 </script>
6 </body>
效果如图:
============================
接下来是置换效果
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
3 <title>网页标题</title>
4 <meta name="keywords" content="关键字列表" />
5 <meta name="description" content="网页描述" />
6 <link rel="stylesheet" type="text/css" href="" />
7 <style type="text/css">
8 *{
9 margin:0;padding:0;
10 }
11 ul li{
12 list-style:none;
13 height:40px;
14 line-height:40px;
15 padding-left:40px;
16
17 }
18
19 ul{
20 height:40px;
21 line-height:40px;
22 overflow:hidden;
23 border-bottom:1px solid #444;
24 }
25 </style>
26 </head>
27 <body>
28 <ul id="ullist">
29 <li>平青海考察说了这些事</li>
30 <li>让良好生态成民生福祉</li>
31 <li>回家生二胎？百万计生人员该往哪里去</li>
32 <li>飞机上使用手机会影响飞行安全吗？</li>
33 <li>姑娘，整不整容，先整整姿态吧！</li>
34 </ul>
35 <script type="text/javascript">
36 setInterval("changLi()",3000);
37
38 function changLi(){
39 //要替换的位置的下标
40 var li_obj = document.getElementsByTagName("li")[0];
41 //要替换的目标的下标
42 var li_obj_0 = document.getElementsByTagName("li")[4];
43 //父对象
44 var ul_obj = document.getElementsByTagName("ul")[0];
45
46
47 ul_obj.insertBefore(li_obj_0,li_obj);
48 }
49 </script>
50 </body>
效果3秒换一内容;
====================================
接下来是用JS代码改变网页背景
1 <body>
2 <!--range 滑动条 设置最小值 设置最大值 设置ID 默认值-->
3 红 :<input type = "range" min = ‘0‘ max = ‘255‘ id = ‘red‘ value = ‘255‘><span id = ‘res_red‘>255</span></br>
4 绿 :<input type = ‘range‘ min = ‘0‘ max = "255" id = ‘green‘ value = ‘255‘><span id = ‘res_green‘>255</span></br>
5 蓝 :<input type = ‘range‘ min = ‘0‘ max = ‘255‘ id = ‘blue‘ value = ‘255‘><span id = "res_blue">255</span></br>
6
7 <script type="text/javascript">
8 //页面加载完成后时运行一匿名函数代码;
9 window.onload = function(){
10
11 //定义三原色变量;
12 var red,blue,green;
13
14 //通过元素名字获取值;
15 var input_obj = document.getElementsByTagName("input");
16
17 //每当数值发生变化时修改相关颜色值;
18 for(var i = 0;i<input_obj.length;i++)
19 {
20 //onchange 当数值发生改变的时候
21 input_obj[i].onchange = function(){
22
23 //通过ID获取已经改变的值;
24 var red = document.getElementById("red").value;
25 var green = document.getElementById("green").value;
26 var blue = document.getElementById("blue").value;
27
28 //innerHTML 改变HTML内容 通过ID修改显示的值
29 document.getElementById("res_red").innerHTML = red;
30 document.getElementById("res_green").innerHTML=green;
31 document.getElementById("res_blue").innerHTML=blue;
32
33 //修改背景颜色;
34 document.body.style.background = "rgb("+red+","+green+","+blue+")";
35 }
36 }
37 }
38 </script>
39 </body>
效果如图:
通过调整三原色的值改变背景的颜色
===================================
动态删除行案例:
代码如下:
1 <script type="text/javascript">
2 //当界面运行完毕;
3 window.onload = function(){
4 //通过ID获取值;
5 var buttObj = document.getElementById("enter");
6 var content = document.getElementById("content");
7 var tabObj = document.getElementById("tab");
8 ////获取表格下面的所有子元素 返回一个集合;
9 var tbodyObj = tabObj.children[1];
10 //获取所有的行;
11 var trs = tbodyObj.rows;
12 //给button添加点击事件;
13 buttObj.onclick = function(){
14 //获取content的值;
15 var text = content.value;
16 //当文本内容不为空时 创建5行3列的表格;
17 if(text != ""){
18 //遍历行;
19 for(var j = 0;j<5;j++){
20 var trObj = document.createElement("tr");//创建tr;
21 //添加到表格
22 tbodyObj.appendChild(trObj);//将tr添加到tbody;
23 //遍历列;
24 for(var i = 1;i<4;i++){
25 //创建td;
26 var tdObj = document.createElement("td");
27 //添加到表格;
28 trObj.appendChild(tdObj);
29 //在表格中修改第一列的长度值并显示;
30 if(i==1){
31 tdObj.innerHTML = trs.length;
32 }
33 //在第二列显示内容;
34 if(i==2){
35 tdObj.innerHTML = text;
36 }
37 //在第三列添加删除的函数;
38 if(i==3){
39 //removes(this) 删除当前对象;
40 var str = "<a href = ‘#‘ onclick = ‘removes(this)‘>删除</a>";
41 tdObj.innerHTML = str;
42 }
43 }
44 }
45 }
46 }
47 }
48 //删除
49 function removes(th){
50 th.parentNode.parentNode.parentNode.removeChild(th.parentNode.parentNode);
51 sorting();
52 }
53 //实现删除后重新排序
54 function sorting(){
55 var trsObj = document.getElementById("tab").tBodies[0].rows;
56 for(var i = 0;i<trsObj.lebgth;i++){
57 trsObj[i].cells[0].innerHTML = i+1;
58 }
59 }
60 </script>
61 </head>
62 <body>
63 <input id = "content" type = "text"/><input id = "enter" type = "button" value = "添加"/>
64 <table id = ‘tab‘ border = ‘2‘ width = ‘300‘>
65 <thead><td>学号</td><td>姓名</td><td>操作</td></thead>
66 <tbody>
67 <tr><td>1</td><td>zhangsan</td><td> </td></tr>
68 <tr><td>2</td><td>zhangsan</td><td> </td></tr>
69 <tr><td>3</td><td>lisi</td><td> </td></tr>
70 <tr><td>4</td><td>zhangsan</td><td> </td></tr>
71 <tr><td>5</td><td>zhangsan</td><td> </td></tr>
72 <tbody>
73 </table>
74 </body>
时间： 2024-10-05 06:26:39