{Day25} 小公主訂單網頁嘗試集＿第二十五集＿實作肆天

2022 iThome 鐵人賽

DAY 25

Modern Web

訂單網頁嘗試集系列第 25 篇

14th鐵人賽網頁教學網頁設計

icetong

2022-10-10 13:26:41

434 瀏覽

分享至

國慶日快樂！！！
連假最後一天，似乎是難過的陰天
剩下五天鐵人賽，其實也挺難過的

今天想製作跑馬燈的功能，還有擴增海底世界～

目標...是這樣拉

新增跑馬燈
html:

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿次</h2>
<link rel="stylesheet" href="day25.css">

</div>

<body>
  <Marquee direction=right behavior="altemate" >小公主海底世界盛大開幕！！</Marquee>
 
    <ul class="drop-down-menu">
        <li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
        </li>
        <li><a href="./day22.html">小公主販售ㄉ海底世界</a>
        </li>
    </ul>

  
    


<table>
    <h2>海豚介紹</h2>
    <tr>
      <td>品種</td>
      <td>艾倫戴爾特有種</td>
    </tr>
    <tr>
      <td>飼養方式</td>
      <td>陪玩/陪喝/陪吃</td>
      <td></td>
   
    </tr>
    <tr>
        <td>飼養環境</td>
        <td>有愛的水域</td>
      </tr> 
    <tr>
        <td>售價</td>
        <td>你對他的愛無價</td>
      </tr>
  </table>

  <h3>限購！每人最多三隻！</h3>
    <img id="dolphin" title="海豚"src="https://cdnappimg.yubaike.com/data/attachment/forum/202008/10/1597074050_380673.jpg" alt="海豚君" >
<br>
    

    <select id="list" onchange="select()">
        <option value="0"selected="selected">請選擇數量</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>

    <h4 id="show"></h4>
  
        <script>

    function select (){
    var x = document.getElementById("list").value;   
    var y = document.getElementById("dolphin").title;

    document.getElementById("show").innerHTML="你選擇飼養了"+x+"隻"+y;
    document.getElementById
}
</script>
</body>
</html>

網頁實作：