不要在html的标签上出现javascript代码，实现javascript代码与html分离

2022年7月4日 482点热度 0人点赞 0条评论

html代码：

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <body>
        <h1>Snapshots</h1>
        <ul id="showPicGallery">
          <li>
            <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
          </li>
          <li>
            <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
          </li>
          <li>
            <a href="images/rose.jpg" title="A red, red rose" >Rose</a>
          </li>
          <li>
            <a href="images/bigben.jpg" title="The famous clock" >Big Ben</a>
          </li>
        </ul>
        <img  id="placeholder"  src="images/placeholder.gif" alt="my image gallery"/>
        <p id="description">Choose an images</p>
        <a href="https://baidu.com" class="popup">Example</a>
        <script src="./jas.js"/>
    </body>
</html>

javascript代码：

window.onload = function(){
    prepareLinks();
    handlePic();
}

function showPic (whichpic) {
   var url = whichpic.getAttribute("href");
   var title = whichpic.getAttribute("title");
   var aElement = document.getElementById("placeholder");
   var pElement = document.getElementById("description");
   aElement.setAttribute("src",url);
   //pElement.childNodes[0].nodeValue = title;
   pElement.firstChild.nodeValue = title;
   //alert(pElement.firstChild.nodeValue)
}

function handlePic(){
    var ulElement =  document.getElementById("showPicGallery");
    var aTagArray = ulElement.getElementsByTagName("a");
    for(var i= 0 ; i < aTagArray.length; i++){
        aTagArray[i].onclick = function(){
            showPic(this);
            return false;
        }
    }
}

上边的window.onload处理函数还有改进的地方，目前的方法只是适合绑定函数少的情况。如果需要绑定很多个函数，且扩展性好的话，改进如下：

编写一个额外的，一劳永逸的代码：

//有多少个函数需要加载，只需要添加这一行代码即可
addLoadEvent(handlePic);
addLoadEvent(prepareLinks);

function addLoadEvent(fuc){
    var oldOnlodEvent =  window.onload;
    if(typeof window.onload != "function"){
    //如果处理函数上还没有绑定有函数，就像平时那样把新函数添加给它。
        window.onload = fuc;
    }else{
    //如果处理函数上已经绑定有函数，就把新函数添追加到加到现有指令的末尾。
        window.onload = function(){
            oldOnlodEvent();
            fuc();
        }
    }
}

添加样式效果图：

html代码：

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen"/>
    <body>
        <h1>Snapshots</h1>
        <ul id="showPicGallery">
          <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/fireworks.jpg" alt="Fireworks"/>
            </a>
          </li>
          <li>
            <a href="images/coffee.jpg" title="A cup of black coffee" >
                <img src="images/coffee.jpg" alt="Coffee"/>
            </a>
          </li>
          <li>
            <a href="images/rose.jpg" title="A red, red rose" >
                <img src="images/rose.jpg" alt="Rose"/>
            </a>
          </li>
          <li>
            <a href="images/bigben.jpg" title="The famous clock" >
                <img src="images/bigben.jpg" alt="Bigben"/>
            </a>
          </li>
        </ul>
        <img  id="placeholder"  src="images/placeholder.gif" alt="my image gallery"/>
        <p id="description">Choose an images</p>
        <a href="https://baidu.com" class="popup">Example</a>
        <script src="./jas.js"/>
    </body>
</html>

css代码：

body{
    font-family: "Heletica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

#showPicGallery{
    list-style: none;
}

#showPicGallery li {
   display: inline;
}

#showPicGallery li a img{
    width: 200px;
    height: 200px;
    border: 0;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

不要在html的标签上出现javascript代码，实现javascript代码与html分离

添加样式效果图：

文章评论