<!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>
