Web应用项目实时跟踪

最新推荐文章于 2023-12-21 14:09:59 发布

夜行旅人

最新推荐文章于 2023-12-21 14:09:59 发布

阅读量325

点赞数

文章标签： WebStorage

本文链接：https://blog.csdn.net/Asatoga/article/details/79220714

版权

=-=最近学到HTML5的localStorage 弄了一个实例玩玩

<!DOCTYPE html>

<html lang="en" manifest="monkeeTime.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>明镜止水</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="Desktop/jquery-1.8.3/jquery-1.8.3/jquery.min.js"></script>
<script src="js/monkeeTime.js"></script>
</head>
<body>
<div id="about" class="hidden">
<p><strong></p>
<p><button type="button" id="closeButton"> Close</button> </p>
</div>
<div id="clearLog-message" title="Clear Log" class="hidden">
确定要清除所有数据？
</div>
<div id="emptyFields-message" title="Missing Required Fields" class="hidden">
必须提供相应数据。
</div>
<header>
<button type="button" id="aboutButton">About</button>
<h1>DEMO</h1>
<form id="logForm">
<input type="text" name="project" value="Project Name" οnfοcus="if(this.value == 'Project Name') this.value ='';"οnblur="if(this.value=='')this.value='Project Name';">
<input type="number" name="hours" value="Hours" class="shortField" οnfοcus="if(this.value=='Hours') this.value='';"οnblur="if(this.value=='')this.value='Hours';">
<input type="text" name="date" value="Date" id="date" class="shortField" οnfοcus="if(this.value=='Date') this.value='';"οnblur="if(this.value=='')this.value='Date';">
<input type="submit" value="Log Time">
</form>
</header>
<section>
<header>
<p>总时长:<span>0</span>hours</p>
</header>
<ul id="thelog">
<li class="empty">Loading…</li>
</ul>
<button type="button" id="clearLog">Clear Log</button>
</section>
<footer>
<p>demo</p>
</footer>
</body>

</html>

js:$(document).ready(function(){
if(typeof(localStorage)=='undefined'){
alert('Your browser dose not support HTML5 localStorage.Try upgrading.');
}else{
getAllItems();
$("logForm").submit(function(){
var newDate=new Date();
var itemId=newDate.getTime();
var values=new Array();
var project=$("input[name='project']").val();
var hours=$("input[name='hours']").val();
var date=$("input[name='date']").val();
project=project.replace(/(<([^>]+)>)/ig,"");
values.push(project);
values.push(hours);
values.push(date);
if(project==""||project=="Prpject Name"||hours==""||hours=="Hours"||date==""||date=="Date"){
$("#emptyFields-message").dialog({
resizable:false,
height:140,
modal:true,
show:'fold',
buttons:{
OK:function(){
$(this).dialog('close');
}
}
});

}else{
try{
localStorage.setItem(itemId,values.join(';'));
}catch(e){
if(e==QUOTA_EXCEEDED_ERR){
alert('Quota exceeded!');
}
}
getAllItems();
}

}
);
$("#clearLog").click(function(){
$("#clearLog-message").dialog({
resizable:false,
height:140,
modal:true,
show:'fold',
buttons:{
'Delet all items':function(){
localStorage.clear();
getAllItems();
$(this).dialog('close');
},
Cancel:function(){
$(this).dialog('close');
}
}
});

});
$("#aboutButton").click(function(){
$("#about").slideDown("slow");

});
$("#closeButton").click(function(){
$("#about").slideUp("slow");
});
}

});

function getAllItems() {
var timeLog="";
var i=0;
var logLength=localStorage.length-1;
var totalHours=0.0;
for(i=0;i<logLength;i++){
var itemKey=localStorage.key(i);
var values=localStorage.getItem(itemKey);
values=values.split(";");
var project=values[0];
var hours=values[1];
var date=values[2];
timeLog += '<li><strong>' + project +'</strong>:'+ hours +'hours<span class="delete">×<span class="hidden" title="Delete Time" id="'+itemKey+'">Are you sure you want to delete' +project+ ' form the log?</span></span> <span class="date">'+date+'</span></li>';
totalHours=totalHours+parseInt(hours);
}
if(timeLog=="")
timeLog='<li class="empty">Log Currently Empty</li>';
//显示总小时数
$("section header p span").html(totalHours);
//更新了所有项目的日志
$("#theLog").html(timeLog);
//最后移除底部边框
$("ul li:last-child").css("border",0);
deleteItem();//在最新名单中，绑定每个项目对话框
}

function deleteItem() {
var deleteItemDialog = new Array();
$(".delete").each(function(){
var id = $(this).find("span").attr("id");
deleteItemDialog[id] = $("#"+id).dialog({
autoOpen:false,
resizable:false,
height:140,
modal:true,
show:'fold',
buttons:{
'Delete Time':function(){
localStorage.removeItem(id);
getAllItems();
$(this).dialog("close");
},
Cancle:function(){
$(this).dialog("close");
}
}
});
$(this).click(function(){
deleteItemDialog[id].dialog("open");
return false;
});

});

}

夜行旅人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web应用项目实时跟踪

=-=最近学到HTML5的localStorage 弄了一个实例玩玩明镜止水 Close 确定要清除所有数据？必须提供相应数据。 AboutDEMO总时长:0hoursLoading…Clear Logdemo
复制链接

扫一扫