HTML5书籍阅读管理

时间：2016-01-09 17:00:39 阅读：218 评论：0 收藏：0 [点我收藏+]

标签：

采用缓存机制，保存后请用同一浏览器打开，切记，切记：

初始界面：

选择日期，然后编辑阅读管理，点击保存，效果如下：

源码如下：

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>书籍阅读进度管理</title>
<style>
div{        
    font-weight:bold;
    left:50%;
    background: #F3F5E7;
}
ul{
    background: #F0E396;
    color: black;
    padding: 1%;
}
li{
    list-style:none;
}
  .date_input {
    font-size: 16px;
    width: 150px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-radius: 2px 0 0 2px;
    padding: 3px 5px;
    background-color: #fbfbfb;
  }
.save_btn {
    border-radius: 3px 3px 3px 3px;
    background: #F0CB85;
    border: 1px solid #F0CB85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #DC143C;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }

  .save_btn:hover{background:#DEB887}
</style>
<script type="text/javascript">
var dateElement;
var today;
function window_onload()
{
    dateElement=document.getElementById("date1");
    today=document.getElementById("today");
    setToday();
}
function date_onchange()
{   
    var obj;
    if(isNaN(Date.parse(dateElement.value)))
    {
        setToday();
        return;
    }
    today.innerHTML=dateElement.value;
    obj=JSON.parse(localStorage.getItem(dateElement.value));
    setInnerHTML(obj);
}
function save()
{
    var obj=new Object();
    obj.record=new Array();
    if(document.getElementById("li1").innerHTML!="书籍名称：")
        obj.record.push(document.getElementById("li1").innerHTML);
    if(document.getElementById("li2").innerHTML!="阅读目标：")
        obj.record.push(document.getElementById("li2").innerHTML);
    if(document.getElementById("li3").innerHTML!="实现目标：")
        obj.record.push(document.getElementById("li3").innerHTML);
    if(document.getElementById("li4").innerHTML!="表现打分：")
        obj.record.push(document.getElementById("li4").innerHTML);
    localStorage.setItem(dateElement.value,JSON.stringify(obj));  
}
function setInnerHTML(obj)
{
    if(obj==null||obj.record==null)
    {
        document.getElementById("li1").innerHTML="书籍名称：";
        document.getElementById("li2").innerHTML="阅读目标：";
        document.getElementById("li3").innerHTML="实现目标：";
        document.getElementById("li4").innerHTML="表现打分：";
    }
    else
    {
        if(obj.record[0]!=null)
            document.getElementById("li1").innerHTML=obj.record[0];
        else
            document.getElementById("li1").innerHTML="书籍名称：";
        if(obj.record[1]!=null)
            document.getElementById("li2").innerHTML=obj.record[1];
        else
            document.getElementById("li2").innerHTML="阅读目标：";
        if(obj.record[2]!=null)
            document.getElementById("li3").innerHTML=obj.record[2];
        else
            document.getElementById("li3").innerHTML="实现目标：";
        if(obj.record[3]!=null)
            document.getElementById("li4").innerHTML=obj.record[3];
        else
            document.getElementById("li4").innerHTML="表现打分：";
    }
}
function setToday()
{
    var date=new Date();
    var yearStr=String(date.getFullYear());
    var monthStr=String(date.getMonth()+1);
    var dateStr=String(date.getDate());
    if (monthStr.length == 1)   monthStr = ‘0‘ + monthStr;
    if (dateStr.length == 1) dateStr = ‘0‘ + dateStr;
    var str=yearStr+"-"+monthStr+"-"+dateStr;
    dateElement.value=str;
    today.innerHTML=dateElement.value;
    var obj=JSON.parse(localStorage.getItem(dateElement.value));
    setInnerHTML(obj);
}
</script> 
</head>  
<body onload="window_onload()">  
<div>
选择日期：<input class="date_input" id="date1" type="date" onchange="date_onchange()"></div><br/>
<div>
本日日期：<span id="today"></span><br/>
阅读管理：<br/>
<ul  contentEditable="true">
<li id="li1">书籍名称：</li>
<li id="li2">阅读目标：</li>
<li id="li3">实现目标：</li>
<li id="li4">表现打分：</li>
</ul>
</div> 
<input class="save_btn" type="button" value="保存" onclick="save()"/>
</body> 
</html>

HTML5书籍阅读管理

标签：

原文地址：http://www.cnblogs.com/tufujie/p/5116656.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行