元素的增删改,定时函数,跳转界面,滚动

点击事件,点击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)返回顶部坐标

返回顶部按钮

<div id="fanhui" style="position:fixed;100px;height:100px;bgcolor:red;font-size:12px;buttom:0px;right:0px;display:none">返回顶部</div>

window.onscroll=function(){

console.log(scrollY);

if(scrollY>200){document.getElementById('fanhui').style.display='block';}

else{document.getElementById('fanhui').style.display='none';}

}

document.getElementById('famhui').onclick=function(){

window.scrollTo(0,0);

}

原文地址:https://www.cnblogs.com/111wdh/p/12838814.html