javascript基礎（定時器的應用）（四十三）
1.定時器的應用一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*開啟絕對定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 點選按鈕以後，使box1向右移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//獲取btn01
var btn01 = document.getElementById("btn01");
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
//開啟一個定時器，控制box1移動
var timer = setInterval(function(){
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通過舊值來計算新值
var newValue = oldValue + 10;
//判斷newValue是否大於800
if(newValue > 800){
newValue = 800;
}
//將box1的left值修改為新值
box1.style.left = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == 800){
clearInterval(timer);
}
},30);
};
};
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有時用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj , name){
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle){
//支援正常的瀏覽器
return getComputedStyle(obj,null)[name];
}else{
//只支援IE
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">使box1向右移動</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*開啟絕對定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
//定義一個變數來儲存定時器的標識
var timer;
window.onload = function(){
/*
* 點選按鈕以後，使box1向右移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//獲取btn01
var btn01 = document.getElementById("btn01");
//獲取btn02
var btn02 = document.getElementById("btn02");
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
//關閉之前的定時器
clearInterval(timer);
//開啟一個定時器，控制box1移動
timer = setInterval(function(){
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通過舊值來計算新值
var newValue = oldValue + 10;
//判斷newValue是否大於800
if(newValue > 800){
newValue = 800;
}
//將box1的left值修改為新值
box1.style.left = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == 800){
clearInterval(timer);
}
},30);
};
//為btn02繫結一個單擊響應函式
btn02.onclick = function(){
clearInterval(timer);
//開啟一個定時器，控制box1移動
timer = setInterval(function(){
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通過舊值來計算新值
var newValue = oldValue - 10;
//判斷newValue是否小於0
if(newValue < 0){
newValue = 0;
}
//將box1的left值修改為新值
box1.style.left = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == 0){
clearInterval(timer);
}
},30);
};
};
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有時用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj , name){
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle){
//支援正常的瀏覽器
return getComputedStyle(obj,null)[name];
}else{
//只支援IE
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">使box1向右移動</button>
<button id="btn02">使box1向左移動</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
3.定時器的應用完善三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*開啟絕對定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
//定義一個變數來儲存定時器的標識
var timer;
window.onload = function(){
/*
* 點選按鈕以後，使box1向右移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//獲取btn01
var btn01 = document.getElementById("btn01");
//獲取btn02
var btn02 = document.getElementById("btn02");
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
move(box1 , 800 , 10);
};
//為btn02繫結一個單擊響應函式
btn02.onclick = function(){
move(box1 , 0 , 10);
};
};
/*
* 定義一個move()函式來執行一些簡單的動畫效果
* 引數：
* obj 要執行動畫的物件
* target 執行動畫的目標位置
* speed 動畫執行的速度
*/
function move(obj , target , speed){
//關閉之前的定時器
clearInterval(timer);
//判斷向左移還是向右移
//0 --> 800 向右移
//起始位置 < 目標位置 則向右移動，速度為正
//800 --> 0 向左移
//起始位置 > 目標位置 則向左移動，速度為負
//獲取元素的起始位置
var current = parseInt(getStyle(obj,"left"));
if(current > target){
//起始位置 > 目標位置 則向左移動，速度為負
speed = -speed;
}
//開啟一個定時器，控制box1移動
timer = setInterval(function(){
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(obj,"left"));
//通過舊值來計算新值
var newValue = oldValue + speed;
//判斷newValue是否大於800
/*
* 如果從0 向 800，執行動畫，則值越來越大
* 如果從800向0執行動畫，則值越來小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)){
newValue = target;
}
//將box1的left值修改為新值
obj.style.left = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == target){
clearInterval(timer);
}
},30);
}
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有時用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj , name){
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle){
//支援正常的瀏覽器
return getComputedStyle(obj,null)[name];
}else{
//只支援IE
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">使box1向右移動</button>
<button id="btn02">使box1向左移動</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
4.定時器的應用完善四：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*開啟絕對定位*/
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
/*開啟絕對定位*/
position: absolute;
top: 200px;
left: 0;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
//定義一個變數來儲存定時器的標識
//var timer;
window.onload = function(){
/*
* 點選按鈕以後，使box1向右移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//獲取box2
var box2 = document.getElementById("box2");
//獲取btn01
var btn01 = document.getElementById("btn01");
//獲取btn02
var btn02 = document.getElementById("btn02");
//獲取btn03
var btn03 = document.getElementById("btn03");
//為btn01繫結一個單擊響應函式
btn01.onclick = function(){
move(box1 , "left" ,800 , 20);
};
//為btn02繫結一個單擊響應函式
btn02.onclick = function(){
move(box1 , "left" ,0 , 10);
};
//為btn03繫結一個單擊響應函式
btn03.onclick = function(){
//點選按鈕以後，使box2向右移動
move(box2 , "left" , 500 , 10 , function(){
move(box2 , "width" , 500 , 10 , function(){
move(box2 , "height" , 500 , 10 , function(){
move(box2 , "top" , 0 , 10 , function(){
});
});
});
});
};
};
</script>
</head>
<body>
<button id="btn01">使box1向右移動</button>
<button id="btn02">使box1向左移動</button>
<button id="btn03">使box2向右移動</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
/*
* 定義一個move()函式來執行一些簡單的動畫效果
* 引數：
* obj 要執行動畫的物件
* attr 執行動畫時要修改的屬性
* target 執行動畫的目標位置
* speed 動畫執行的速度
* callback 回撥函式，當動畫執行完畢以後，該回撥函式會執行
*/
function move(obj, attr, target, speed, callback) {
//關閉之前的定時器
/*
* 一般都會將定時器的標識作為執行動畫物件的屬性儲存，這樣可以確保只有當前物件能訪問到定時器
*/
clearInterval(obj.timer);
//判斷向左移還是向右移
//0 --> 800 向右移
//起始位置 < 目標位置 則向右移動，速度為正
//800 --> 0 向左移
//起始位置 > 目標位置 則向左移動，速度為負
//獲取元素的起始位置
var current = parseInt(getStyle(obj, attr));
if(current > target) {
//起始位置 > 目標位置 則向左移動，速度為負
speed = -speed;
}
//開啟一個定時器，控制box1移動
obj.timer = setInterval(function() {
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(obj, attr));
//通過舊值來計算新值
var newValue = oldValue + speed;
//判斷newValue是否大於800
/*
* 如果從0 向 800，執行動畫，則值越來越大
* 如果從800向0執行動畫，則值越來小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//將box1的left值修改為新值
obj.style[attr] = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == target) {
clearInterval(obj.timer);
//呼叫回撥函式
callback && callback();
}
}, 30);
}
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有時用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj, name) {
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle) {
//支援正常的瀏覽器
return getComputedStyle(obj, null)[name];
} else {
//只支援IE
return obj.currentStyle[name];
}
}相關文章
- 【JavaScript基礎】Js的定時器（你想看的原理也在喲）JavaScriptJS定時器
- JavaScript定時器JavaScript定時器
- JavaScript 定時器JavaScript定時器
- Mac基礎設定—應用程式Mac
- 【Go進階—基礎特性】定時器Go定時器
- JavaScript6：定時器JavaScript定時器
- 【JavaScript定時器小案例】常見的幾種定時器實現的案例JavaScript定時器
- 1.15 JavaScript6：定時器JavaScript定時器
- 輪播圖（JavaScript定時器）JavaScript定時器
- nginx的基礎應用（續）Nginx
- echarts基礎應用Echarts
- shell基礎應用
- python基礎應用Python
- Sentinel基礎應用
- 計時器的應用
- javascript怎麼清除所有定時器JavaScript定時器
- Javascript 定時器呼叫傳遞引數的方法JavaScript定時器
- javascript定時器（setTimeout和setInterval）的使用詳解JavaScript定時器
- Windows應用程式基礎Windows
- Linux應用——程序基礎Linux
- Ubuntu Server 基礎應用UbuntuServer
- ESP8266_SDK開發基礎（3）硬體定時器定時器
- 基於51微控制器的定時器定時器
- JavaScript 定時器函式非同步原理JavaScript定時器函式非同步
- Java應用伺服器之tomcat基礎配置（一）Java伺服器Tomcat
- javascript基礎JavaScript
- Android基礎及應用 Intent的呼叫AndroidIntent
- Android基礎及應用 Service的使用Android
- TS基礎應用 & Hook中的TSHook
- Azure 基礎 : 使用 Automation 定時開機
- JavaScript中的瀏覽器檢測和DOM基礎JavaScript瀏覽器
- 應用基礎框架全面解析框架
- Linux下Nginx基礎應用LinuxNginx
- 從零開始再學 JavaScript 定時器JavaScript定時器
- JavaScript筆記12：控制CSS、事件、定時器JavaScript筆記CSS事件定時器
- 關鍵應用和超融合基礎架構：時機已到架構
- 瀏覽器執行javaScript程式碼基礎瀏覽器JavaScript
- JavaScript基礎原理JavaScript
- Javascript基礎之-thisJavaScript