上半年会坚持每周写几个用纯js实现的功能。
篇一:
功能:打开网页div慢慢从右下角出现,点x慢慢消失。
效果图:
js代码:
window.onload=function(){
var tardiv = getElement('.content');
var addHeight=1; //每次循环增加的高度
tardiv.style.bottom='-200px';
var timer=setInterval(function(){
//console.log(tardiv.style.bottom) // string类型 20px;
var bottoms = parseInt(tardiv.style.bottom);
tardiv.style.bottom=bottoms+addHeight+'px';
if(parseInt(tardiv.style.bottom)===0){
clearInterval(timer);
}
},10)
var x = getElement('.x');
var self=this;
x.addEventListener('click',function(){
if(self.timer){
clearInterval(self.timer);
}
var timers = setInterval(function(){
var bottomss = parseInt(tardiv.style.bottom);
tardiv.style.bottom=bottomss-addHeight+'px';
if(parseInt(tardiv.style.bottom)===-200){
clearInterval(timers);
}
},10)
})
//获取元素方法
function getElement(el) {
var els = el.substr(1);
return el.substr(0,1) ==='#' ? document.getElementById(els): document.getElementsByClassName(els)[0];
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>右下角广告栏打开网页慢慢出现,点击慢慢消失</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<span class="x">x</span>
</div>
<script src="js/one.js"></script>
</body>
</html>
css
div {
width: 200px; height: 200px; background: red;
position: fixed; right: 0;
}
span {
position: absolute; display: inline-block;
width: 20px; height: 20px; background: black;
right: 0; color: white; text-align: center;
line-height: 20px; cursor: pointer;
}
注意点:
1:js获取样式的方法 el.style.bottom 得到的是string类型,
2:显示隐藏的div 需要设置样式 position:fixed