练习
1.阅读协议倒数效果
<script type="text/javascript">
var leftSeconds = 10;function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) {//如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载完
if (leftSeconds <= 0) {
btnReg.value = "同意";
btnReg.disabled = ""; //btnReg.disabled=false;
clearInterval(intervalId);
}
else {
btnReg.value = "请仔细阅读协议（还剩" + leftSeconds + "秒）";
leftSeconds--;
}
}
}
var intervalId = setInterval("CountDown()", 1000);
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value="同意" disabled="disabled" />
2.加法计算器
<script type="text/javascript">
function calcClick() {
var value1 = document.getElementById("text1").value;
var value2 = document.getElementById("text2").value;
value1 = parseInt(value1, 10);
value2 = parseInt(value2, 10)
document.getElementById("textSum").value = value1 + value2;
}
</script>
</head>
<body>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="button" value="计算" id="btn" οnclick="calcClick()" />
<input type="text" id="textSum" readonly="readonly" />
3.美女时钟
<script type="text/javascript">
function Fill2Len(i){ //将一位数变为两位数
if(i<10){
return "0"+i;
}
else{
return i;}
}
function Refresh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
var now = new Date();
var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";
imgMM.src = filename;
}
setInterval("Refresh()", 1000);
//页面加载时候取值，就不会出现第一秒没有图片的效果
</script>
</head>
<body οnlοad="Refresh()">
<img id="imgMM" src="" />
DOM的动态创建
document.write只能在页面加载中才能动态创建
1.动态添加按钮 主要通过 createElement 和appendChild创建元素和添加子元素
<script type="text/javascript">
function Createbtn() {
var divMain = document.getElementById("divMain");
var input = document.createElement("input");
input.type = "button";
input.value = "动态添加";
divMain.appendChild(input);
}
</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="点击创建" οnclick="Createbtn()" />
2.innerText innerHtml
<a href="http://vip.book.sina.com.cn/book/index_196513.html" id="link">我的<font color="blue">作品</font></a>
<input type="button" value="显示属性" οnclick="alert(document.getElementById('link').innerText);alert(document.getElementById('link').innerHTML);" />
<input type="button" value="修改innerText" οnclick="document.getElementById('link').innerText='长寿'" />
<input type="button" value="修改innerHTML" οnclick="document.getElementById('link').innerHTML='<font color=red>长</font>寿'" />
增加按钮
<script type="text/javascript">
function creatInput() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<input type='button' value='add' />";
}
</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="动态添加" οnclick="creatInput()" />
动态添加超链接
<script type="text/javascript">
function creatlink() {
var divMain = document.getElementById("divMain");
var link = document.createElement('a');
link.href = "http://vip.book.sina.com.cn/book/index_196513.html";
link.innerText = "120工程";
divMain.appendChild(link);
}
</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="动态添加" οnclick="creatlink()" />
动态添加表格
<script type="text/javascript">
function LoadData() {
var data = { "120工程": "http://vip.book.sina.com.cn/book/index_196513.html", "作品": "http://vip.book.sina.com.cn/book/index_196513.html", "我的作品": "http://vip.book.sina.com.cn/book/index_196513.html" };
var tblLinks = document.getElementById("tblLinks");
for (var key in data) {
var values = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + values + "'>" + values + "</a>";
tr.appendChild(td2);
tblLinks.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="tblLinks"></table>
<input type="button" value="加载数据" οnclick="LoadData()" />
动态添加表格兼容ie6的两种方法
<script type="text/javascript">
function LoadData() {
var data = { "120工程": "http://vip.book.sina.com.cn/book/index_196513.html", "作品": "http://vip.book.sina.com.cn/book/index_196513.html", "我的作品": "http://vip.book.sina.com.cn/book/index_196513.html" };
var tblLinks = document.getElementById("tblLinks");
for (var key in data) {
var values = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + values + "'>" + values + "</a>";
tr.appendChild(td2);
tblLinks.tBodies[0].appendChild(tr);//兼容ie6
}
}
function LoadData2() {
var data = { "120工程": "http://vip.book.sina.com.cn/book/index_196513.html", "作品": "http://vip.book.sina.com.cn/book/index_196513.html", "我的作品": "http://vip.book.sina.com.cn/book/index_196513.html" };
var tblLinks = document.getElementById("tblLinks2");
for (var key in data) {
var values = data[key];
var tr = tblLinks2.insertRow(-1); //添加最后一行
var td1 = tr.insertCell(-1);
td1.innerText = key; //ff不兼容 可以修改为innerHTML
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + values + "'>" + values + "</a>";
}
}
</script>
</head>
<body>
<table id="tblLinks">
<tbody></tbody>
</table>
<table id="tblLinks2">
</table>
<input type="button" value="加载数据" οnclick="LoadData()" />
<input type="button" value="加载数据2" οnclick="LoadData2()" />
</body>
如果爱 请深爱
4673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
