HTML--------------动态列表 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的书籍收藏</title>
      <style>
          .ok{
          color:green;
              font-size:14px;
              /*粗体*/
              font-weight:bold;
          }
          .no{
              color:red;
              font-size:15px;
              /*斜体*/
              font-style:italic;
          }
    </style>
  </head>
  <body>   
      <!-- 页面标题 -->
      <p id="page-title">我的书籍收藏</p>
     <input id="demo" type="text">
     <button onclick="on('ok')"> 添加已完成</button>
     <button onclick="on('ing')"> 添加正在阅读</button>
     <!-- 阅读计划列表 -->
     <p>我的阅读计划:</p>
     <ol id="_id"> 
     </ol>
      <script>
          var books=[
              {
                  name:"哈利波特",
                  status:true
              },
              {
                  name:"世界简史",
                  status:true
              },
              {
                  name:"HTML & CSS",
                  status:true
              },
          ]
          olData();
          function on(status){
              var t=document.getElementById("demo").value;
              if(status==="ok"){
                  books[books.length]={name:t,status:true}        
              }else{
                   books[books.length]={name:t,status:false}
              }
            olData();  
          }
          function olData(){
              document.getElementById("_id").innerHTML="";
              var t='';
              for(var i in books){
                  console.log(i,books[i])
                  if(books[i].status){
                      t=`<li class="ok">已完成阅读《${books[i].name}》</li>`
                  }else{
                      t=`<li class="no">正在阅读《${books[i].name}》</li>`
                  }
                  document.getElementById("_id").innerHTML+=t;
              }
          }
      </script>
    <!-- 书籍来源列表-->
      <p>我的书籍来源:</p>
      <ul>
          <li class="ok">书店购买</li>
          <li>图书馆借阅</li>
          <li class="ok">朋友赠送</li>
          </ul>
  </body>
</html>

位移运算

 

posted @ 2025-12-05 19:50  付书恒  阅读(2)  评论(0)    收藏  举报