标签:type document load blur child 按钮 ati div ima
点击事件,点击div时触发一个弹窗
<div id="a1">点击</div>
js
document.getElementById(‘a1‘).onclick=function(){
alert(‘点击‘)
}
如果写在head里面需要加window.onload,会最后执行js
window.onload=function(){
document.getElementById(‘a1‘).onclick=function(){
alert(‘点击‘)
}
}
焦点,一般input用的多,例如:写用户名时点击别处显示用户名已经注册过(onblur失去焦点,onfocus获取焦点)
<input type="text" id="in">
document。getElementById(‘in‘)。onblur=function(){
alert(‘失去焦点‘);}
document。getElementById(‘in’)。onfocus=function(){
alert(‘获取焦点’);}
添加元素
//var p=document.createElement(‘p‘);//创建元素
//var nod=document.createTextNode(‘新段落‘);/* 创建一个新文本 */
//p.appendChild(nod);
//document.getElementById(‘a‘).appendChild(p);//在html中添加元素《p》新段落《、p》
删除元素
<div id="ids"><p id="ip">段落</p></div>
<button id="dianji">点</button>
document。getElementById(‘dianji’)。onclick=function(){
var parent=document。getElementById(‘ids’);
var chi=document。getElementById(‘ip’);
parent。removeChild(chi);}当点按钮时会移除p标签中的元素
元素的替换
<div id="ids"><p id="ip">段落</p></div>
<button id="dianji">点</button>
document。getElementById(‘dianji’)。onclick=function(){
var div=document。creatElement(‘div’);添加一个div,需要创建一个div
var divtext=document。createTextNode(‘新元素’);创建一个节点
div。appendChild(divtext);把文本加到div中
var parent=document。getElementById(‘ids’);
var chi=document。getElementById(‘ip’);
parent。replaceChild(div,chi);}新元素div替换旧元素chi
document。write(text);不要在整个文档加载之后写
定时函数
var t=setInterval(function(){
var d=new Date();
console.log(d);
},1000)每秒更新一次时间
图片切换
<img id="img" src="../img/images/dt1_03.jpg" ></img>
var i=1;
var t=setInterval(function(){
if(i==1){
document.getElementById(‘img‘).src=‘../img/images/dt1_03.jpg‘;
}
else{
document.getElementById(‘img‘).src=‘../img/images/about_02.jpg‘;
}
if(i==2){
i=0;
}
i++;
},2000)//轮播图
取消定时器
<button id="dianji">点</button>
<img id="img" src="../img/images/dt1_03.jpg" ></img>
var i=1;
var t=setInterval(function(){
if(i==1){
document.getElementById(‘img‘).src=‘../img/images/dt1_03.jpg‘;
}
else{
document.getElementById(‘img‘).src=‘../img/images/about_02.jpg‘;
}
if(i==2){
i=0;
}
i++;
},2000);
document。getElementById(‘dianji’)。onclick=function(){
clearInterval(t);点击按钮时取消定时器,图片就不轮播
};
延迟执行
var t=setTimeout(function(){
alert(‘aa’);},5000);五秒之后执行弹框
document。getElementById(‘dianji’)。onclick=function(){
clearTimeout(t);};取消执行内容
document.getElementById(‘id‘).onclick = function(){
window.location.href = ‘http://www.baidu.com‘;
}//点击id元素时,跳转到百度界面
document.getElementById(‘id1‘).onclick = function(){
window.history.back();
}//点击id1元素时,后退到上个界面
document.getElementById(‘id2‘).onclick = function(){
window.onload = function(z) {
z++;
}
}//当元素id2加载完后,执行内部function
scrolly(0,0)返回顶部坐标
标签:type document load blur child 按钮 ati div ima
原文地址:https://www.cnblogs.com/111wdh/p/12838814.html