欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

同一個網頁中實現(xiàn)多個JavaScript特效的方法

 更新時間:2015年02月02日 10:31:14   作者:yongh701  
這篇文章主要介紹了同一個網頁中實現(xiàn)多個JavaScript特效的方法,實例分析了多個特效的實現(xiàn)原理與相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了同一個網頁中實現(xiàn)多個JavaScript特效的方法。分享給大家供大家參考。具體分析如下:

一般來說,在網頁中,如果出現(xiàn)兩次<script type="text/javascript"></script>標簽,所有的JavaScipt腳本都不會再生效,只能出現(xiàn)一次<script type="text/javascript"></script>標簽,但是,同一個網頁中常常需要多個JavaScript特效。

一、基本目標

在網頁中掛載兩個JavaScript時鐘,其中一個是每1秒走一次的正常時間,另外一個是每3秒才走一次的不正常時鐘,只是為了區(qū)分之后,來說明同一個網頁中如何實現(xiàn)多個JavaScript特效。效果如下圖所示:

二、制作過程

方法一:

復制代碼 代碼如下:
<html> 
<head> 
<script type="text/javascript"> 
function clocka() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clocka").innerHTML = time; 
        } 
function a(){ 
    clocka(); 
    setInterval("clocka()", 1000); 

function clockb() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clockb").innerHTML = time; 
        }        
function b(){ 
    clockb(); 
    setInterval("clockb()", 3000); 

</script> 
</head> 
<body onLoad="a(),b()"> 
<div id="clocka"></div> 
<div id="clockb"></div> 
</body> 
</html>

先把要實現(xiàn)的那段特效的寫到一個函數里,函數a(),b(),再通過body的onLoad,讓其加載網頁就馬上去載入這段函數。
至于clocka()與clockb(),是根據原來的JavaScript代碼改寫過來的。原來處于<body>中那段JavaScript代碼如下:

復制代碼 代碼如下:
<script type="text/javascript"> 
function clock() { 
    var time = new Date().toLocaleString(); 
    document.getElementById("clock").innerHTML = time; 

setInterval("clock()", 1000); 
</script>
 

方法二:

就是在<script>不寫入type類型,直接寫type,不過這種方法有一定的延遲性,特效是一個一個加載的,如果太多特效的話,效果會不好。

但是編碼的整潔性與直觀性,完勝上面的方法。

代碼如下:

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
function clocka() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clocka").innerHTML = time; 
        } 
function clockb() { 
            var time = new Date().toLocaleString(); 
            document.getElementById("clockb").innerHTML = time; 
        }    
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>twojs</title> 
</head> 
 
<body> 
<script> 
setInterval("clocka()", 1000); 
</script> 
<script> 
setInterval("clockb()", 3000); 
</script> 
<div id="clocka"></div> 
<div id="clockb"></div> 
</body> 
</html>

希望本文所述對大家的javascript程序設計有所幫助。

相關文章

  • 關于ES6尾調用優(yōu)化的使用

    關于ES6尾調用優(yōu)化的使用

    這篇文章主要介紹了關于ES6尾調用優(yōu)化的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • js 判斷字符串中是否包含某個字符串的實現(xiàn)代碼

    js 判斷字符串中是否包含某個字符串的實現(xiàn)代碼

    工作中經常會使用到判斷一個字符串是否包含某一個字符串,因此總結一下幾個方法,需要的朋友可以參考下
    2023-03-03
  • javascript模板方法模式和職責鏈模式實例分析

    javascript模板方法模式和職責鏈模式實例分析

    這篇文章主要介紹了javascript模板方法模式和職責鏈模式,結合實例形式較為詳細的分析了模板方法模式和職責鏈模式基本原理、實現(xiàn)方法與相關注意事項,需要的朋友可以參考下
    2023-07-07
  • 淺析Javascript中雙等號(==)隱性轉換機制

    淺析Javascript中雙等號(==)隱性轉換機制

    這篇文章給大家詳細介紹了javascript中雙等號(==)隱性轉換機制,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-10-10
  • JS實現(xiàn)的表格行上下移動操作示例

    JS實現(xiàn)的表格行上下移動操作示例

    這篇文章主要介紹了JS實現(xiàn)的表格行上下移動操作,涉及javascript針對頁面元素節(jié)點與屬性的相關操作技巧,需要的朋友可以參考下
    2016-08-08
  • JS設置cookie、讀取cookie、刪除cookie

    JS設置cookie、讀取cookie、刪除cookie

    Js操作Cookie總結(設置,讀取,刪除),工作中經常會用到的哦!下面是詳細代碼,如有錯誤,請留言指正!
    2015-04-04
  • js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載

    js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載

    這篇文章主要為大家詳細介紹了js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載,原理很簡單,就是為window添加一個scroll事件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2015-12-12
  • 詳解webpack引入第三方庫的方式以及注意事項

    詳解webpack引入第三方庫的方式以及注意事項

    這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • js中各種時間格式的轉換方法舉例

    js中各種時間格式的轉換方法舉例

    近幾天在做百度地圖時,需要轉換時間格式并做顯示,下面這篇文章主要給大家介紹了關于js中各種時間格式的轉換方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • 微信小程序返回上一級頁面的實現(xiàn)代碼

    微信小程序返回上一級頁面的實現(xiàn)代碼

    這篇文章主要介紹了微信小程序返回上一級頁面的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06

最新評論