本帖最后由 小石姐姐 于 2018-10-26 09:16 编辑
案例3_自动跳转首页 有问题
[Java] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p id="p1"><span id="span1">5</span>秒之后,将跳转首页</p>
<script>
//获取span标签id值,进行操作
var byId = document.getElementById("span1");
//定义一个变量,进行倒计时
var jishu =5;
function fun() {
jishu--;
//判断时间如果<= 0 ，则跳转到首页,不能等等,因为这样还会显示 -1
if (jishu <=0){
location.href ="http://www.baidu.com";//todo BOM下的地址栏对象的href属性来设置指定的值(路径),去访问
}
byId.innerHTML = jishu+"";//todo 这个属性是谁的属性?
}
setInterval(fun,1000);//todo 使用BOM下的window对象下的定时器方法来调用方法,执行方法里面的方法体,每隔一秒进行操作一次
</script>
</body>
</html>
轮播图
[Java] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
var din = 1;//设置条件判断
function fun() {
var byId = document.getElementById("light");//获取元素对象,通过id
if (din == 1) {
byId.src = "../img/banner_2.jpg";////修改图片src属性
din = 2;
} else if (din == 2) {
byId.src = "../img/banner_3.jpg";//修改图片src属性
din = 3;
} else if (din == 3) {
byId.src = "../img/banner_1.jpg";//修改图片src属性
din = 1;
}
}
setInterval("fun()", 2000);//绑定时间,执行方法.
</script>
</head>
<body>
<img src="../img/banner_1.jpg" id="light"> <!--设置html元素-->
</body>
</html>
动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
.top{
text-align: center;
margin: 60px;
/* border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="top">
<input type="text" placeholder="请输入编号" id="bh">
<input type="text" placeholder="请输入姓名" id="xm">
<input type="text" placeholder="请输入性别" id="xb">
<input type="button" value="提交" id="add"><br />
<p>学生信息表</p>
<center> <table class="table" border="1px" width="500px" id="table">
<tr>
<th >编号</th>
<th >姓名</th>
<th >性别</th>
<th >操作</th>
</tr>
<!--<tr>
<td >1</td>
<td >zhangsan</td>
<td >nan</td>
<td ><a href="#">删除</a></td>
</tr>-->
</table></center> <!--todo 问题,怎么设置居中,这个方法过时了-->
</div>
<script>
//1.获取提交按钮元素,通过id
var add_id = document.getElementById("add");
//通过提交按钮对象,绑定单击事件,进行操作函数
add_id.onclick = function () {
//todo ============获取表格元素对象============================================
var table_id = document.getElementById("table");
//创建tr节点
var tr1 = document.createElement("tr");
//tabel里面添加tr节点
table_id.appendChild(tr1);
//创建td节点
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//todo 创建删除节点
//创建新的td节点
var td_delet = document.createElement("td");
//创建新的a节点
var a_id = document.createElement("a");
//设置a属性
a_id.setAttribute("href","#");
//创建删除节点
var delet_text = document.createTextNode("删除");
//将删除节点放到a节点里面
a_id.appendChild(delet_text);
a_id.setAttribute("onclick","del(this);")
//将a节点,放到td节点里面
td_delet.appendChild(a_id);
//往tr节点里面添加td节点
tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td3);
//todo 将td节点放到tr节点里面
tr1.appendChild(td_delet);
//获取编号节点
var bh_string = document.getElementById("bh").value;//这个是String类型
var bh_id = document.createTextNode(bh_string);
//姓名节点
var xm_string = document.getElementById("xm").value;//这个是String类型
var xm_id = document.createTextNode(xm_string);
//性别节点
var xb_string = document.getElementById("xb").value;//这个是String类型
var xb_id = document.createTextNode(xb_string);
//往td节点里面添加文本节点
td1.appendChild(bh_id);
td2.appendChild(xm_id);
td3.appendChild(xb_id);
}
function del(obj) {
var tableobj = obj.parentNode.parentNode.parentNode;
tableobj.removeChild(obj.parentNode.parentNode);
}
</script>
</body>
</html>
优化动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
.top{
text-align: center;
margin: 60px;
/* border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="top">
<input type="text" placeholder="请输入编号" id="bh">
<input type="text" placeholder="请输入姓名" id="xm">
<input type="text" placeholder="请输入性别" id="xb">
<input type="button" value="提交" id="add"><br />
<p>学生信息表</p>
<center> <table class="table" border="1px" width="500px" id="table">
<tr>
<th >编号</th>
<th >姓名</th>
<th >性别</th>
<th >操作</th>
</tr>
<!-- <tr>
<td >1</td>
<td >zhangsan</td>
<td >nan</td>
<td ><a href="#">删除</a></td>
</tr>-->
</table></center> <!--todo 问题,怎么设置居中,这个方法过时了-->
</div>
<script>
//1.获取提交按钮元素,通过id
var add_id = document.getElementById("add");
//通过提交按钮对象,绑定单击事件,进行操作函数
add_id.onclick = function () {
var bh_string = document.getElementById("bh").value;//这个是String类型
var xm_string = document.getElementById("xm").value;//这个是String类型
var xb_string = document.getElementById("xb").value;//这个是String类型
//获取table对象
var table_id = document.getElementById("table");
table_id.innerHTML += "<tr>\n" +
" <td >bh_string</td>\n" +
" <td >xm_string</td>\n" +
" <td >xb_string</td>\n" +
" <td ><a href=\"#\" onclick=\"del(this);\">删除</a></td>\n" +
" </tr>";
}
function del(obj) {
var tableobj = obj.parentNode.parentNode.parentNode;
tableobj.removeChild(obj.parentNode.parentNode);
}
</script>
</body>
</html>
| 
收藏
淘帖
踩
