11111 |
<title></title>
<style type="text/css">
.red_li{
height: 100px;
background: red;
}
.blue_li{
height: 100px;
background: blue;
}
</style>
<script type="text/javascript">
onload = function(){
#创建ul元素,注意是数组,取[0]
var my_lis = document.getElementsByTagName("ul")[0];
#定义循环次数,9行
var loop_times = 9;
#for 循环遍历元素
for (var i = 0;i<loop_times;i++){
#创建li元素,并出入文本innerText
var my_li = document.createElement("li");
my_li.innerText = i+1;
#做出判断,偶数行奇数行的不同颜色
if(i%2 == 0){
#调用style里的定义颜色的方法.
my_li.className="red_li";
}
else{
my_li.className="blue_li";
}
#把创建的li 赋值到ul中
my_lis.appendChild(my_li);
}
}
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
二:动态表格练习,实现用户输入id/name/tel/并保存到table中,操作可删除
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<script type="text/javascript"> | |
function save_msg(){ | |
// 拿到我们的用户输入信息 | |
var id_input = document.getElementById("user_id").value; | |
var name_input = document.getElementById("user_name").value; | |
var user_phone = document.getElementById("user_phone").value; | |
var id_td = document.createElement("td"); | |
id_td.innerText = id_input; | |
//创建对应td | |
var name_td = document.createElement("td"); | |
name_td.innerText = name_input; | |
var tel_td = document.createElement("td"); | |
tel_td.innerText = user_phone; | |
//需要给删除的那个td添加样式和相应方法 | |
var operate_td = document.createElement("td"); | |
operate_td.innerText = "删除"; | |
operate_td.style.color = "blue"; | |
operate_td.onclick = function(){ | |
var select_td = this; | |
// 通过使用parentNode 拿到我们的一行 然后调用remove删除 | |
select_td.parentNode.remove(); | |
} | |
//创建tr 行标签 将所有的td追加到tr内 | |
var my_tr = document.createElement('tr'); | |
my_tr.appendChild(id_td); | |
my_tr.appendChild(name_td); | |
my_tr.appendChild(tel_td); | |
my_tr.appendChild(operate_td); | |
//获取table, 添加tr | |
var my_table = document.getElementsByTagName('table')[0]; | |
my_table.appendChild(my_tr); | |
} | |
</script> | |
</head> | |
<body> | |
ID:<input type="text" id="user_id" /> | |
姓名: <input type="text" id="user_name" /> | |
电话: <input type="text" id="user_phone" /> | |
<button onclick="save_msg()">保存</button> | |
<table border="1px"> | |
<tr> | |
<td>Id</td> | |
<td>Name</td> | |
<td>Tel</td> | |
<td>操作</td> | |
</tr> | |
</table> | |
</body> | |
</html> | |
三:给页面换肤,#id互换
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style type="text/css"> | |
#container{ | |
width: 100%; | |
height: 600px; | |
border: 1px solid red; | |
background-image: url(img/bg1.gif); | |
} | |
#container_new{ | |
width: 100%; | |
height: 600px; | |
border: 1px solid red; | |
background-image: url(img/bg2.jpg); | |
} | |
#btn_container{ | |
height: 200px; | |
width: 300px; | |
background: darkseagreen; | |
margin: 0 auto; | |
} | |
</style> | |
<script type="text/javascript"> | |
function changeOne(){ | |
var my_container = document.getElementById("container_new"); | |
if (my_container == null) { | |
console.log("当前就是1背景"); | |
} else { | |
my_container.id = "container"; | |
} | |
} | |
function changeTwo(){ | |
var my_container = document.getElementById("container"); | |
if (my_container == null) { | |
console.log("当前就是2背景"); | |
} else { | |
my_container.id = "container_new"; | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="btn_container"> | |
<button onclick="changeOne()">皮肤1</button> | |
<button onclick="changeTwo()">皮肤2</button> | |
</div> | |
</div> | |
</body> | |
</html> | |