js时间、定时器、移动div块、轮播
时间
var now = new Date();
var future = new Date(2016,8,12,24,0,0);
var lefts = parseInt((future-now)/1000);
var day = parseInt(lefts/86400);
var year = now.getFullYear();
var month = now.getMonth()+1<=10?now.getMonth()+1:’0’+(now.getMonth()+1);
var date = now.getDate();
var week = now.getDay(); 0:周天
var hour = now.getHours();
var minute = now.getMinutes()
var second = now.getSeconds();
var shijianchuo = now.getTime();
定时器
time1 = setTimeout(func(),1000) 定时器 1000毫秒后执行func函数
clearTimeout(time1) 关闭定时器
time2 = setInterval(func(),1000) 反复定时器 每1秒后执行(也耗时间)
clearInterval(time2) 关闭反复定时器
点击移动div块
<body>
<button onClick="show()">点我移动</button>
<div id="dd" style="width: 100px;height: 100px;background: #ccc;position:absolute;left: 0px"></div>
</body>
</html>
<script>
function show(){
var d = document.getElementById("dd");
/*var str=d.style.width;*/
/*var str=d.style.left;
str=parseInt(str.slice(0,-2));*/
var str=0;
var obj=setInterval(function(){
str=str+3;
/*d.style.width=str+"px";*/
d.style.left=str+"px";
if(str >= 1000){
clearInterval(obj);
}
},50);
}
</script>
轮播
<body>
<center>
<img src="./image/blue_big.jpg" height="300px" id="img_1" alt=""><br>
<button onClick="pre()">上一张</button>
<button onClick="next()">下一张</button><br>
<!--<div id="div1">
<button onClick="change(0)">源计划·联合</button>
<button onClick="change(1)">源计划·自由</button>
<button onClick="change(2)">源计划·林</button>
</div>-->
<div id="div1">
<img src="./image/blue_big.jpg" height="50px" xb="0" alt="">
<img src="./image/green_big.jpg" height="50px" xb="1" alt="">
<img src="./image/orange_big.jpg" height="50px" xb="2" alt=""><br>
</div>
</center>
</body>
</html>
<script>
var imgs=['./image/blue_big.jpg','./image/green_big.jpg','./image/orange_big.jpg'];
var i=0;
var t=2000;
var IntervalObj=null;
var oImg=null;
var oBtn=[]; //oBtn数组
var oImg_small = [];
window.onload = function(){
init(); //初始化变量
addEvent(); //添加事件
}
/*初始化变量*/
function init(){
oImg_small = document.getElementById('div1').getElementsByTagName("img"); //缩略图 数组
oBtn=document.getElementById('div1').getElementsByTagName("button");
oImg = document.getElementById("img_1"); // 图片元素
IntervalObj = setInterval(next,t); // 轮播重复
}
/*添加事件*/
function addEvent(){
oImg.onmouseover = function(){ //图片的鼠标移入事件
clearInterval(IntervalObj);
}
oImg.onmouseout = function(){ //图片鼠标的移出事件
IntervalObj = setInterval(next,t);
}
for(var j = 0; j<oImg_small.length;j++){ //点击 每一张缩略图
oImg_small[j].onclick = function(){
i = +this.getAttribute("xb"); //获取其下标
oImg.src = imgs[i]; //路径 给 img元素的src
}
}
for(var j = 0; j<oImg_small.length;j++){ //点击 每一张缩略图
oBtn[j].onclick = function(){
i = +this.getAttribute("xb"); //获取其下标
oImg.src = imgs[i]; //路径 给 img元素的src
}
}
}
function next(){ /*下一张*/
i++;
if(i >= imgs.length){ // i=图片数 时（最后一张）
i = 0; // 再从第一张开始
}
oImg.src = imgs[i];
}
function pre(){ /*上一张*/
i--;
if(i < 0){ // i<0 时（第一张）
i = imgs.length-1; // 再跳到最后一张
}
oImg.src = imgs[i];
}
/*function change(num){
i=num;
oImg.src=imgs[i]
}*/
</script>
