燕十八 javascript
一、DOM
查找 DOM 节点
增加节点
克隆
删除
替换
innerHEML
节点的属性
DOM事件
1、查找 DOM 节点
DOM 中查找节点的思路，
由大到小找，个别情况也可能由子到父
由大到小，通过下面三个方法来进行大的定位
document.getElementById() 根据 id 来查找节点，返回的是节点本身
document.getElementsByTagName() 通过标签来查找返回数组
document.getElementsByName() 通过 name 来查找返回数组，因为 IE 浏览器只对表单 name 属性有效，所以为了兼容性 document.getElementsByName() 只用来查找表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>找DOM节点</title>
<Script type="text/javascript">
function t1(){
alert(document.getElementById('artcicle'));
}
function t2(){
alert(document.getElementsByTagName('div').length);
}
function t3(){
var inp = document.getElementsByName('hobby');
var len = inp.length;
for(var i=0; len > i;i++){
alert(inp[i]);
}
}
</Script>
</head>
<body>
<div id="artcicle"></div>
<div></div>
<div></div>
<p>
<input type="test" name="hobby"/>
<input type="test" name="hobby"/>
<input type="test" name="hobby"/>
</p>
<input type="button" value="ById" onclick="t1()" />
<input type="button" value="ByTagName" onclick="t2()" />
<input type="button" value="ByName" onclick="t3()" />
</body>
</html>js 里只有这些类型
Number
String
Boolean
Object
null 也是对象，数组也是对象
undefined
如果还没有查到想要的结果，还可以根据前面已经找到的节点再次定位，继续查找
查找子元素
childNodes
children[index]
查找父元素
node.parentNode
下面 4 个受空白文本的影响，建议不用
frstChild
lastChild
nextSibling 兄弟元素
previousSibing
如果查到的某个元素，仍然非常大，
这时候我们还可以利用 getElementsByTagName 来进一步筛选
注意，
对于元素对象和 docment 对象相比
元素对象只能用 getElementByTagName 函数，其他两个不可以使用
所有元素都能用 style 来控制，所有元素都有一个属性或者叫子对象 style 对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查找练习</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
margin: 0 auto;
width: 1002px;
}
#header {
height: 128px;
background: #F80004;
}
#aaaa {
height: 256px;
}
#lside {
height: 480px;
width: 694px;
margin: 0 auto;
border: 1px solid #EEE;
border-radius: 5px;
border-top: none;
}
.four {
width: 326px;
height: 200px;
background: #EEE;
margin: 10px;
float: left;
}
#footer {
padding-top: 15px;
height: 120px;
width: 694px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="lside">
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
</div>
<div id="footer">
<input type="button" value="findheader" onclick="t1();"/>
<input type="button" value="ById-结合子元素" onclick="t2();"/>
</div>
<script type="text/javascript">
function t1(){
var header = document.getElementById('header');
//header.id = 'aaaa';//重新指定id样式
header.style.height = '2000px';
header.style.background = 'url(http://ruyic.com/blog/uploads/image/201602/pic1454919599341872.jpg)';
}
function t2(){
var lside = document.getElementById('lside');//查父节点
lside = lside.children;//父元素下的子节点
//lside = lside.childNodes;//父元素下的子节点,空白也会算做节点
alert(lside.length);
for(var i=0 ,len = lside.length; len > i;i++ ){
//alert(lside[i]);
}
lside[0].style.background='red';
alert(lside[0]);
}
</script>
</body>
</html>根据父子元素，兄弟元素的相对关系在定位
<div>第0个</div>
<div>第1个
<ul id="season">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</div>
<div id="banner">
第2个
<p>p1</p>
<p>p2</p>
<span>span</span>
<div>div</div>
</div>
<div>第3个</div>
<Script type="text/javascript">
function t1() {
var uls = document.getElementById('season');
alert(uls.parentNode); //找到父元素
uls.parentNode.style.background = 'blue';
}
function t2() {
var uls = document.getElementById('season');
//uls.firstChild.style.background='red';//第一个节点是空格
//uls.firstChild.nextSibling.style.background='red'；//空格后的下一个节点
uls.children[0].style.background = 'pink';
}
function t3() {
var banner = document.getElementById('banner');
//banner.children[2].style.background='red';
banner.getElementsByTagName('p')[1].style.background = 'red';;
}
</Script>
<p>
<input type="button" value="父元素" onclick="t1()" />
<input type="button" value="第一个子元素" onclick="t2()" />
<input type="button" value="元素中在根据标签查找" onclick="t3()" />
</p>总结
页面最大的是 document 文档对象
一般从大到小，先定位，
定位后根据父子、兄弟关系详细定位
从 document 的角度出发，用下面三个方法来寻找
1. document.getElementById()
2. document.getElementsByTagName()
3. document.getElementsByName() 只能用在表单中
通过以上三个方式定位后，如果找到的节点已经比较小，
可以以这个节点为坐标，通过 children 子元素、parentNode 父元素、nextSibling 下一个兄弟节点、previousSibing 上一个兄弟节点，这些属性来具体定位
如果通过以上三种方式定位，找到的节点依然非常大，子节点依然非常多
我们还可以继续利用 getElementsByTagName() 继续寻找
比如 node.getElemensTag.Name('span')
2、增加节点
节点的增加，分2步
1. 你要增加什么节点？
2. 增加在那？
document.createElement() 创造元素节点
document.createTextNode() 创造文本节点
node.appendChild(追加的子元素) 给某元素插入一个子元素，并插在最后
在 .container 里增加 p 节点
1. 先创造一个 p 节点
2. 然后把 p 节点附加到 .contarner 里
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>增加节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function t1(){
// 在container里增加p节点
var nodep = document.createElement('P'); // 1 创建p节点
var cont = document.getElementById('container');
cont.appendChild(nodep); // 2 把p节点附加到contarner里
}
function t2(){
var nodep = document.createElement('P');
var art = document.createTextNode(Math.random());
nodep.appendChild(art);
var cont = document.getElementById('container');
cont.appendChild(nodep);
}
</script>
<style type="text/css">
p{
width: 100px;
height: 100px;
background:red;
}
div#container{
background:#eeeeee;
}
#container p{
background:pink;
}
</style>
</head>
<body>
<p></p>
<div id="container">
<p></p>
</div>
<input type="button" value="增加新节点" onclick="t1();">
<input type="button" value="给增加的新节点里面加文字" onclick="t2();">
</body>
</html>在指定位置增加一个子元素
insertBefore(nodeReferenceX,nodeReferenceY) 第一个是待插入节点，第二个是定位用的坐标
<script type="text/javascript">
function t1(){
var zhong = document.createTextNode('中');// 创建文本中
var nodeli = document.createElement('li');
nodeli.appendChild(zhong);
var nodeul = document.getElementsByTagName('ul')[0];
var xi = nodeul.children[2];
nodeul.insertBefore(nodeli, xi);//第一个是待插入节点，第二个是定位用的坐标
}
</script>
<ul>
<li>东</li>
<li>南</li>
<li>西</li>
<li>北</li>
</ul>
<input type="button" value="把中插在西前边" onclick="t1()"/>3、克隆节点 cloneNode(bool:copyChildrenToo)
oldNode.clonNode(false/true)
false 代表克隆节点，并同时克隆子节点
true 不克隆子节点
<script type="text/javascript">
function t2(){
var oldul = document.getElementsByTagName('ul')[0];
var newul = oldul.cloneNode(true);
var cart = document.getElementById('cart');
cart.appendChild(newul);
}
</script>
<ul>
<li>东</li>
<li>南</li>
<li>西</li>
<li>北</li>
</ul>
<div id="cart"></div>
<input type="button" value="创造一个和ul相同的节点到div里" onclick="t2()"/>4、删除节点
parend.removeChild(待删除的子节点)
当你某个节点 nodeN 为例，你是无法调用 nodeN.xxx 方法删掉
必须得站在其父节点的高度，通过 removeChild 才能删除.
找到“中”的父元素，
在“中”的父元素调用 removeChild() 方法
<script type="text/javascript">
function t1(){
var nodeul = document.getElementsByTagName('ul')[0];
var zhong = nodeul.children[2];
nodeul.removeChild(zhong);
}
</script>
<ul>
<li>东</li>
<li>南</li>
<li>中</li>
<li>西</li>
<li>北</li>
</ul>
<input type="button" value="删除节点" onclick="t1()"/>5、节点的替换
parentNode.replaceChlid(新节点, 旧节点)
先创建一个新节点准备，再找到要被替换的旧节点，然后到旧节点的父节点上去，站在父节点的高度上
找到"北"
创建一个"<li>上</li>"
再找到"北"的父元素，在中的父元素调用 .replaceChild(新节点, 旧节点)
<script type="text/javascript">
function t2(){
var nodeul = document.getElementsByTagName('ul')[0];
var bei = nodeul.children[4];
var shang = document.createTextNode('上');
var newli = document.createElement('li');
newli.appendChild(shang);
nodeul.replaceChild(newli,bei);
}
</script>
<ul>
<li>东</li>
<li>南</li>
<li>中</li>
<li>西</li>
<li>北</li>
</ul>
<input type="button" value="把北替换上" onclick="t2()"/>6、innerHTML 直接写入HTML
直接写入html内容(不是w3c标准，但主流的浏览器支持，而且非常好用)
innerHTML 属性
节点的 innerHTML 属性是可读可写
读，是把某个节点内部的html代码读出来
如果赋值，则相当于把节点的html代码更新
<script type="text/javascript">
function t1(){
var cont = document.getElementById('container');
alert(cont.innerHTML);
}
function t2(){
var cont = document.getElementById('container');
var htmlcode = '<p>';
htmlcode += '<ul>';
htmlcode += ' <li>东</li>';
htmlcode += ' <li>南</li>';
htmlcode += ' <li>中</li>';
htmlcode += ' <li>西</li>';
htmlcode += ' <li>北</li>';
htmlcode += '</ul>';
htmlcode += '</p>';
cont.innerHTML = htmlcode;
}
function t3(){
var cont = document.getElementById('container');
cont.innerHTML = "<img src='https://www.baidu.com/img/bd_logo1.png'/>";
}
</script>
<div id="container">
<p>
<ul>
<li>好</li>
</ul>
</p>
</div>
<input type="button" value="内部的HTML代码" onclick="t1()"/>
<input type="button" value="修改内部的HTML代码" onclick="t2()"/>
<input type="button" value="加一个图片" onclick="t3()"/>7、修改节点的属性
在节点中，
一种是直接写在标签内部的属性 如 src、alt、tetle、type、name、value、checked
注意，
有一个例外，控制元素的类名称的时候，不用obj.class而是用obj.className
还有一种是体现 css 里的属性
Style 各种 css 属性，如 width、height、border、fontSize
修改节点的属性
<script type="text/javascript">
function t1(){
var email = document.getElementsByName('email')[0];
alert(email.value);
}
function t2(){
var email = document.getElementsByName('email')[0];
if(email.value==''){
email.value = '这里不能为空';
}
}
function t3(){
var email = document.getElementsByName('email')[0];
email.type = 'radio';
}
</script>
<p>
<input type="test" name="email" value="">
<input type="button" value="邮件地址" onclick="t1();">
<input type="button" value="检查邮件地址" onclick="t2();">
<input type="button" value="变成radio" onclick="t3();">
</p>8、DOM事件
DOM 事件是指当前页面上发生某一件事时候，激发某一个函数，相当于监听或触发设备，比如
元素被单击时 onclick
元素失去焦时 onblur
表单被提交时 onsubmit
DOM 事件如何声明?
1. 直接在元素标签中声明 <input type="text" noclick="fun();"/>
2. 给事件属性附上一个函数变量 inputobj.onclick = fn;
主要的 DOM 事件
页面事件
onBlur 失去焦点时 表单验证时常用
onFocus 获得焦点时
onLoad 页面加载时
onunload 当页面关闭时
鼠标事件
onClick 当点击时 常用
onmouseover 当经过时 常用
onmouseout 当离开时 常用
onmousedown 当鼠标按下时
onmouseup 当鼠标抬起时
onmousemove 当鼠标移动时
键盘事件
onChange 当内容被改变时 非常重要
onsSelect 当内容被选中时
onKeypress 当键盘点击时 键盘某一个键
onkeydown 当键盘按下时
onkeyup 当键盘抬起时
onSubmit 当表单提交时 非常重要
onReset 当表单重置时
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件</title>
<script type="text/javascript">
function t1(){
var email = document.getElementsByName('email')[0];
alert('失去焦点时');
}
function t2(){
var email = document.getElementsByName('email')[0].value = '这里不能为空';
}
function t3(){
alert('在唠一会');
//return false;
}
function t4(){
var baidu = document.getElementById('baidu');
baidu.style.display = 'block';
}
function t5(){
var baidu = document.getElementById('baidu');
baidu.style.display = 'none';
}
function t6(){
var sel = document.getElementsByName('xueli')[0];
//alert(sel.value);
if(sel.value=='' || sel.value=='初中'){
alert('必须初中以上，不能不选');
}
}
</script>
<style type="text/css">
#baidu{
display: none;
}
</style>
</head>
<body onload="t2();">
<a href="#" onmouseover="t4();" onmouseout="t5();">百度</a>
<p id="baidu">
<img src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png" />
</p>
<form>
<p>失去焦点：<input type="test" name="email" value="" onblur="t1()"></p>
<p>
<select name="xueli" onChange="t6();">
<option value="">默认</option>
<option value="大学">大学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
</select>
</p>
</form>
</body>
</html>onsubmit 比较特殊
在 <form onsubmit = "return 函数名();">
这样函数 return false 时，才能阻拦住表单的提交行为
<script type="text/javascript">
function chk(){
var email = document.getElementsByName('email')[0].value;
if(email == ''){
alert('email不能为空');
return false;
}
}
</script>
<form onsubmit = "return chk();">
<p><input type="test" name="email" value=""></p>
<p><input type="submit" value="提交"/></p>
</form>第二种 DOM事件声明方法
<input type="text" name="email" value="">
<script type="text/javascript">
function t1(){
var email = document.getElementsByName('email')[0].value='写入文字';
alert('ok');
}
document.getElementsByName('email')[0].onblur = t1;
</script>tag 切换
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
<style type="text/css">
ul{
width:300px;
height:20px;
line-height:20px;
}
ul li{
width:75px;
float:left;
list-style:none;
}
p{
width:300px;
height:300px;
float:left;
border:1px solid rgba(216,216,216,1.00);
}
#news,#people,#tech{
display:none;
}
</style>
<script type="text/javascript">
function t1(pid){
var ps=['mil' ,'news' ,'people' ,'tech'];
for(var i=0,len=ps.length;i<len;i++){
if(ps[i]==pid){
document.getElementById(ps[i]).style.display = 'block';
}else{
document.getElementById(ps[i]).style.display = 'none';
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li onMouseOver="t1('mil');">军事</li>
<li onMouseOver="t1('news');">新闻</li>
<li onMouseOver="t1('people');">人物</li>
<li onMouseOver="t1('tech');">科技</li>
</ul>
<p id="mil">军事</p>
<p id="news">新闻</p>
<p id="people">人物</p>
<p id="tech">科技</p>
</div>
</body>
</html>相册效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相册效果</title>
<script type="text/javascript">
// 点小图，改大图路径
// 改大图路径 --> 获取大图对象，改其 src 属性
// 点某一个小图，如果确定把大图改成???
function chpi(num){
var pics = ['' ,'winter' ,'blue' ,'sunset' ,'vater'];
var bigpic = document.getElementsByTagName('p')[0].children[0];
//alert('images/'+pics[num]+'.jpg');
bigpic.src='images/'+pics[num]+'.jpg';
}
</script>
<style type="text/css">
ul li{
list-style:none;
float:left;
}
</style>
</head>
<body>
<p><img src="images/winter.jpg" /></p>
<ul>
<li><img src="images/01.jpg" onClick="chpi('1');"/></li>
<li><img src="images/02.jpg" onClick="chpi('2');"/></li>
<li><img src="images/03.jpg" onClick="chpi('3');"/></li>
<li><img src="images/04.jpg" onClick="chpi('4');"/></li>
</ul>
</body>
</html>字体大中小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体大中小</title>
</head>
<style type="text/css">
div{font-size:14px;margin-bottom:20px;}
</style>
<script type="text/javascript">
function chfont(num){
document.getElementsByTagName('div')[0].style.fontSize=num+'px';
//js中"fontSize"语法是这样写的与css中不同，前两天碰到margin-left 在js的语法marginLeft
}
</script>
<body>
<div>
窗前明月光<br/>
疑是地上霜<br/>
举头望明月<br/>
低头思故乡<br/>
</div>
<input type="button" value="小" onClick="chfont('12')"/>
<input type="button" value="中" onClick="chfont('16')"/>
<input type="button" value="大" onClick="chfont('20')"/>
</body>
</html>表格隔行换色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色</title>
<style type="text/css">
body{
background: #f2f2f2;}
table{
border-collapse: collapse;
border:1px solid #ffffff;
}
</style>
<script type="text/javascript">
function chcolor(){
var trs = document.getElementsByTagName('tr');
for(var i=0,len=trs.length;i<len;i++){
if(i%2==0){
trs[i].style.background='#0171c5';
trs[i].style.color='#ffffff';
}else{
trs[i].style.background='#fff4b2';
}
//alert(i);
}
}
</script>
</head>
<body onLoad="chcolor();"> <!-- 这里加chcolor页面加载后在触发 -->
<table width="200" border="1">
<tbody>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</tbody>
</table>
</body>
</html>联动菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动菜单</title>
<script type="text/javascript">
var cha = [['长恨歌' ,'后宫词' ,'暮江吟'],['洞仙歌' ,'摸鱼儿' ,'水调歌头' ,'满江红']];
function ld(){
var sel = document.getElementById('prov').value;
var opt = '';
//alert(sel);
if(sel == '-1'){
document.getElementById('city').innerHTML = '<option value="-1">待选择</option>';
return;
}
for(var i=0 ,len = cha[sel].length; i<len; i++){
var opt = opt + '<option value="'+ i +'">'+ cha[sel][i] +'</option>';
document.getElementById('city').innerHTML = opt;
}
}
</script>
</head>
<body>
<select name="" id="prov" onchange="ld();">
<option value="-1">请选择</option>
<option value="0">唐诗三百</option>
<option value="1">宋词</option>
</select>
<select name="" id="city"></select>
</body>
</html>js 操作 DOM 总结
节点创建
节点增加
节点删除
节点修改（替换）
创建节点
元素节点 例 <p></p>
文本节点 例: 我是文本
属性节点 例: <img src="" />
创建元素节点
document.createElement('标签名称')
创建文本节点
document.createTextNode('文字内容')
节点的增加
找到其父元素，调用 父元素.appendChild(新节点)
如果想指定插入在父元素的某个子元素之前
找到父元素，找到定位用的子元素
调用父元素.insertBefore(新节点,定位节点)
节点的复制
node.cloneNode(true/false)
true 代表复制子节点
false 不复制 子节点
节点的替换
有一个新节点，一个旧节点，还得找到旧节点的父节点
parentNode.replaceChild(新节点, 旧节点)
js 操作节点的属性和css属性
对于 <input type="" name="" value=""/>
上面 type、name、value 这种直接写在节点内部的属性名，js 如何操作？
答：先找到该节点，然后"节点.属性名"
有一个例外，节点.class ==> 节点.className
对于 css 属性
{
width:200px;
font-size:14px;
}
如何操作?
答：
找到节点
节点.style.css属性
css属性的命名规律：
如果css属性不含"-",则js中属性与css属性相同
如果css属性含有"-",则js中的相应属性为css属性去掉"-",并把"-"后的首字母大写
二、BOM
BOM 浏览器对象模型
BOM ----> window
window.document
document 对象其实是 window 对象的一个属性或子对象
window 对象的子对象介绍
window.navigator 浏览器的相关信息
.appCodeName 内部代码
.appName 浏览器名称
.appVersion 浏览器版本
.platform 操作系统类型
.userAgent 用户代理信息
.cookieEnabled 是否支持 cookie
window.history 历史记录，或者控制前进后退
.length 历史记录的数目
.back() 后退 back(-1)
.forward() 前进(1)
.go()
window.screen 屏幕 表示分辨率信息
.heigth
.width
.availHeight 可用高度
.availWidth 可用宽度
.colorDepth 颜色
window.document BOM模型
window.location 地址栏，可以控制页面跳转
host 主机
port 端口
href 地址
pathname 路径
protocol 协议
search 查询字符串
assign(url) 页面跳转
window.document 为什么之前的学习中，直接写 document??
因为 window 对象是最大的一个对象，所有对象都在其内部，
写 document 默认就是在最全局的 window 下面属性或子对象
window 对话框
alert(message) 对话框
confirm(message) 确认框
prompt(message, 默认值) 第一个提示信息，第二个默认值
close()
print()
confirm 在 a 元素中用法，以前在网上搜的就一直这么用
<a href=javascript:if(confirm("确实要删除吗?"))location="del.php?id=52">删除</a>
history 对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>history</title>
<script type="text/javascript">
//alert(window.navigator.userAgent);
function tui(){
window.history.back(-1);
}
function qian(){
window.forward(1);
}
function much(){
alert(window.history.length);
}
</script>
</head>
<body>
<input type="button" value='有多少条' onClick="much();"/>
<input type="button" value='前进' onClick="qian();"/>
<input type="button" value='后退' onClick="tui();"/>
<input type="button" value='后退' onClick="tui();"/>
</body>
</html>screen 对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>screen</title>
<script type="text/javascript">
alert('屏幕分辨率是: '+window.screen.width + ' * ' + screen.height);
alert('有效可用分辨率是: '+ window.screen.availHeight + ' * ' +window.screen.availWidth);
</script>
</head>
<body>
</body>
</html>locahost 对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>locahost</title>
<script type="text/javascript">
//alert(window.location.href);
function qubaidu(){
window.location.href='http://baidu.com';
}
</script>
</head>
<body>
<input type="button" value="去百度" onClick="qubaidu();"/>
</body>
</html>window 对话框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>window对话框</title>
<script type="text/javascript">
function con(message){
confirm('确定要删除吗');
}
function reg(){
prompt('输入您的姓名','例：张三');
}
</script>
</head>
<body>
<input type="button" value="确定框" onClick="con();">
<input type="button" value="请输入你的姓名" onClick="reg();">
</body>
</html>comfirm 在 a 标签中的用法，以前在网上搜到的用法，一直这么用
<a href=javascript:if(confirm("确实要删除吗?"))location="del.php?id=52">删除</a>三、定时器
window定时器
setIntval(表达式,毫秒);
clearIntval(定时器对象);
setTimeout(表达式,毫秒);
clearTimeout(定时器对象);
定时器 setTimeout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器 setTimeout</title>
</head>
<script type="text/javascript">
//window定时器
//window.setTimeout('事件',时间);
//是指:经过"时间"后执行"事件"一次
function t(){
alert('5秒到，快走');
window.location.href="http://baidu.com";
}
window.setTimeout("t()",5*1000);
</script>
<body>
</body>
</html>定时器-每隔几秒自动执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器-每隔几秒自动执行</title>
<script type="text/javascript">
//没隔几秒执行一下setTimeout
function t(){
alert('两秒后重复弹出');
window.setTimeout("t()",2*1000);
}
t();
</script>
</head>
<body>
</body>
</html>setInterval() 定时器-每隔几秒自动执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器-每隔几秒自动执行</title>
<script type="text/javascript">
//window.setInterval('事件','时间');
//是指，每隔指定时间，就执行一次事件
function t(){
alert('3秒后重复弹出');
}
var clock = window.setInterval("t();",3000);
//把window.setInterval()赋值给一个变量，
//在把这个变量用clearInterval清理掉
//同理用clearTimeout(定时器对象);清理setTimeout(表达式,毫秒);
function st(){
clearInterval(clock);
}
//在创建定时器的时候
//把创建结果赋给一个"定时器变量"
//比如:
//var clock = window.setInerval()
//在用：
//clearInterval(clock);
</script>
</head>
<body>
<input type="button" value="别烦人了" onclick="st();" />
</body>
</html>定时器换图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器换美女</title>
<script type="text/javascript">
function bo(){
document.getElementsByTagName('img')[0].src='http://ruyic.com/blog/uploads/image/201505/143071919486009.jpg';
}
setTimeout('bo()' ,3000); // 如果没有定时的秒数，代码要放在图片代码下面，不然会报错。
</script>
</head>
<body>
<img src="http://ruyic.com/blog/uploads/image/201505/143071918233392.jpg" alt=""/>
</body>
</html>倒计时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器换美女-倒计时效果</title>
<script type="text/javascript">
function bo(){
var inp = document.getElementsByName('time')[0];
var time = parseInt(inp.value)-1;//parseInt转换为数值类型
inp.value=time;//改写input的值
if(time == 0){
document.getElementsByTagName('img')[0].src='http://ruyic.com/blog/uploads/image/201505/143071919486009.jpg';
clearInterval(clock);
}
}
var clock = setInterval('bo()' ,1000);//每隔一秒执行一次
</script>
</head>
<body>
<input type="button" name="time" value="5" /><br />
<img src="http://ruyic.com/blog/uploads/image/201505/143071918233392.jpg" alt=""/>
</body>
</html>