JS-WEB-API-Day5
2019-07-28 本文已影响0人
小可_34e0
一次性定时器
<body>
<input type="button" name="" value="按键" id="btn">
</body>
<script src="xiec.js"></script>
<script>
window.onload=function(){
//一次性定时器
var timeId=window.setTimeout(function(){
alert('您好');
},1000);
//点击这个按钮，停止这个一次性定时器
document.getElementById('btn').onclick=function(){
clearTimeout(timeId);
};
};
</script>
案例：协议按钮禁用：
<body>
<input type="text" name="" value="请仔细阅读一下协议，如静静看书发阿萨德你烦" id="txt">
<input type="button" name="" value="按键" id="btn" disabled="disabled">
</body>
<script src="xiec.js"></script>
<script>
var time=5;
var timeId=setInterval(function(){
time--;
my$('btn').value="请仔细阅读协议("+time+")";
if(time<=0){
//停止定时器
clearInterval(timeId);
//按钮能被点击
my$('btn').disabled=false;
my$('btn').value="同意";
}
},1000);
</script>
案例：div渐变：
<style >
*{
padding: 0%;
margin:0%;
}
#dv{
width: 300px;
height: 200px;
background-color: pink;
opacity: 1;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="按键" id="btn" >
</body>
<script src="xiec.js"></script>
<script>
my$('btn').onclick=function(){
var opacity=1;
//按钮被点击
var timeId=setInterval(function(){
opacity--;
if(opacity<=0){
clearInterval(timeId);
}
my$('dv').style.opacity=opacity/10;
},2000);
};
</script>
div变宽：
<body>
<div id="dv"></div>
<input type="button" name="" value="变宽" id="btn" >
</body>
<script src="xiec.js"></script>
<script>
my$('btn').onclick=function(){
var width=300;
//按钮被点击
var timeId=setInterval(function(){
width+=10;
if(width>=900){
clearInterval(timeId);
}
my$('dv').style.width=width+"px"
},200);
};
</script>
案例：移动元素
<body>
<div id="dv"></div>
<input type="button" name="" value="移动到400" id="btn1" >
<input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>
my$('btn1').onclick=function(){
var timeId=setInterval(function(){
//获取当前位置
var current=my$('dv').offsetLeft;//数字类型，没有px
//div每次移动多少像素
var step=10;
//每次移动后的距离
current+=step;
//判断当期那移动后的位置是否到达目标位置
if(current<=400){
my$('dv').style.left=current+"px";
}else{
//清除定时器
clearInterval(timeId);
}
},20);
};
my$('btn2').onclick=function(){
var timeId=setInterval(function(){
//获取当前位置
var current=my$('dv').offsetLeft;//数字类型，没有px
//div每次移动多少像素
var step=10;
//每次移动后的距离
current+=step;
//判断当期那移动后的位置是否到达目标位置
if(current<=800){
my$('dv').style.left=current+"px";
}else{
//清除定时器
clearInterval(timeId);
}
},20);
};
</script>
封装动画：
<style >
*{
padding: 0%;
margin:0%;
}
#dv{
width: 200px;
height: 100px;
background-color: pink;
/*注意点：需要加position，使div脱离文本流*/
position: absolute;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="移动到400" id="btn1" >
<input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>
my$('btn1').onclick=function(){
animate(my$('dv'),400);
};
my$('btn2').onclick=function(){
animate(my$('dv'),800);
};
//动画函数：
function animate (element,target){
//先清理定时器
clearInterval(element.timeId);//------------->是element.timeId;
element.timeId=setInterval (function(){
//获取当前位置
var current=element.offsetLeft;//数字类型，没有px
//div每次移动多少像素
var step=10;
step=current<target?step:-step;
//每次移动后的距离
current+=step;
//判断当期那移动后的位置是否到达目标位置
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}else{
//清除定时器
clearInterval(timeId);
element.style.left=target+"px";
}
},20);
}
</script>
简单的轮播图
QQ图片20190728112220.png
html:
<body>
<!--布局：-->
<!--1.图片，用于轮播展示-->
<!--2.左右箭头，用于切换图片-->
<!--3.圆点，用于显示正在展示第几张图片，也可以通过点击进行图片跳转-->
<div class="exterior_container">
<div class="carousel_container type_area block_mediate">
<ul class="carousel">
<li class="carousel_item active"><img src="./image/1.jpg" alt="" class="src"></li>
<li class="carousel_item"><img src="./image/2.jpg" alt="" class="src"></li>
<li class="carousel_item"><img src="./image/3.jpg" alt="" class="src"></li>
<li class="carousel_item"><img src="./image/4.jpg" alt="" class="src"></li>
<li class="carousel_item"><img src="./image/5.jpg" alt="" class="src"></li>
</ul>
<button class="left"><</button>
<button class="right">></button>
<ul class="points block_mediate">
<li class="points_item active" data-index="0"></li>
<li class="points_item" data-index="1"></li>
<li class="points_item" data-index="2"></li>
<li class="points_item" data-index="3"></li>
<li class="points_item" data-index="4"></li>
</ul>
</div>
</div>
</body>
<!--动画：-->
<!--1.点击左右可以向左或者向右转换图片。-->
<!--2.点击下方圆点可以跳转到某一张图片-->
<!--3.假设显示第1张图片，那么第一个圆点的颜色与其他圆点颜色不一样。-->
<script src="lunbotu.js"></script>
</html>
css:
.type_area{
width: 1000px;
overflow: auto;
}
img{
height: 300px;
width: 600px;
}
li{
list-style: none;
}
.block_mediate{
margin: 0 auto;
}
body,div,html,ul,li,button{
padding: 0;
margin: 0;
}
.carousel_container{
position: relative;
height: 300px;
width: 600px;
overflow: hidden;
}
/*.carousel{*/
/**/
/*}*/
.carousel_item{
height: 100%;
width: 100%;
font-size: 60px;
font-family: Consolas;
color:wheat;
position: absolute;
line-height: 300px;
text-align: center;
opacity: 0;
transition:all 1s;
}
.carousel_item:nth-child(1){
background-color: orange;
}
.carousel_item:nth-child(2){
background-color: purple;
}
.carousel_item:nth-child(3){
background-color: yellowgreen;
}
.carousel_item:nth-child(4){
background-color: brown;
}
.carousel_item:nth-child(5){
background-color: darkgoldenrod;
}
button{
width: 60px;
height: 60px;
border:none;
background-color: rgba(255,255,255,0);
font-size: 40px;
position: absolute;
top:120px;
z-index: 1230;
}
button:hover{
background-color: rgba(1, 1, 1, 0.5);
cursor: pointer;
}
.right{
right:0px;
}
.left{
left:0px;
}
.points{
height: 30px;
width: 200px;
background-color: rgba(29, 22, 19, 0.2);
position: absolute;
bottom: 20px;
left: 200px;
border-radius: 10px 10px 10px 10px ;
z-index: 1230;
}
.points_item{
height: 15px;
width: 15px;
background-color: wheat;
float: left;
border-radius: 50%;
margin-right: 20px;
margin-top: 7px;
}
.points_item:nth-child(1){
margin-left: 22px;
}
.points_item:hover{
cursor: pointer;
}
.carousel_item.active{
z-index: 123;
opacity: 1;
}
.points_item.active{
background-color: black;
}
js:
// 获取图片组。
// 获取按钮*2。
// 获取圆点组。
let imgGroup=document.getElementsByClassName('carousel_item');
let btnLeft=document.getElementsByClassName('left')[0];
let btnRight=document.getElementsByClassName("right")[0];
let pointGroup=document.getElementsByClassName("points_item");
// console.log(imgGroup, btnLeft,btnRight,pointGroup);获取的元素是正确的
let index=0;//初始化一个索引值，用于切换图片。
let clearActive=function(){
for(let i=0;i<imgGroup.length;i++){
imgGroup[i].className="carousel_item";
pointGroup[i].className="points_item";
}
}
let goRight=function () {
clearActive();
if(index<4){index++;}
else {index=0;}
imgGroup[index].className="carousel_item active";
pointGroup[index].className="points_item active";
}
let goRight_auto=goRight;
btnRight.addEventListener("click",goRight);
let goLeft=function () {
clearActive();
if(index>0){index--;}
else {index=4;}
imgGroup[index].className="carousel_item active";
pointGroup[index].className="points_item active";
}
btnLeft.addEventListener("click",goLeft);
setInterval(function () {
goRight_auto();
},5000);
let carouselContainer=document.getElementsByClassName("carousel_container")[0];
for(let i=0;i<pointGroup.length;i++){
pointGroup[i].addEventListener("click",function(){
index=this.getAttribute("data-index")-1;
goRight();
})
}
carouselContainer.addEventListener('mouseover',function () {
goRight_auto=function(){};
});
carouselContainer.addEventListener('mouseleave',function () {
goRight_auto=goRight;
});
offset系列：
QQ图片20190728104225.png
QQ图片20190728104749.png
document获取事件
QQ图片20190728105443.png
图片跟着鼠标飞：
<style >
*{
padding: 0%;
margin:0%;
}
img{
position: absolute;
}
</style>
</head>
<body>
<img src="./image/1.jpg" id="im">
</body>
<script src="xiec.js"></script>
<script>
//鼠标在页面中移动，图片跟着鼠标移动
document.onmousemove=function(e){
//鼠标的移动的横纵坐标
//可视区域的横坐标
//可视区域的纵坐标
my$('im').style.left=e.clientX+"px";
my$('im').style.top=e.clientY+"px";
}
</script>
