js+jquery实现html5的后台缓存书签效果

浏览数：46 / 时间：2015年06月09日

<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
	<style type="text/css">
		*{margin:0px;padding:0px;}
		body{background:url("imges/bg2.jpg")}
		.Menu{
			width:200px;height:252px;background:#CDFEC0;
			position:absolute;left:500px;top:100px;
			z-index:33;box-shadow:0px 0px 14px #000;
			border:2px solid #DDD}
		.Menu ul li {list-style-type:none;COLOR:#445605;
			line-height:35px;text-indext:25px;font-family:"微软雅黑";
			border-bottom:1px solid #ddd;
			text-align:center;
			}
		.Menu ul li:hover{
			background:#ABDE6D;color:#6D2EC5;cursor:hand;
		}
		#desk_list{width:100%;height:700px;position:relative;}
		#desk_list .desk{width:274px;height:261px;
			/*border:1px solid #000*/;position:absolute;
			cursor: move;}
		#desk_list .desk .desk_con{
			text-indent:2em;
			width: 147px;
			height: 115px;
			background: none repeat scroll 0% 0% #FFF;
			margin: 90px auto;
			box-shadow:0px 0px 2px rgba(0,0,0,0.5);
			cursor:move}
		#desk_list .desk p {
			display:block;
			position:absolute;
			bottom:30px;
			text-indent:0em;/*border:1px solid #000;*/
			display:block;
			width: 147px;
			height: 25px;
			text-align:center;
			font-size:12px;
			}
		#desk_list .desk p span{
			color:red;
			padding:0px 5px;
			font-size:14px;
			font-family:"Arial";
		}
	</style>
 </HEAD>

 <BODY>
  <div class="Menu">
	<ul>
		<li style="cursor:hand"><a>新建文件夹</a></li>
		<li class="hover" style="cursor:hand"><a>添加便签</a></li>
		<li style="cursor:hand"><a>清除便签</a></li>
		<li style="cursor:hand"><a>刷新</a></li>
		<li style="cursor:hand"><a>上传资料</a></li>
		<li style="cursor:hand"><a>更换背景</a></li>
		<li style="cursor:hand"><a>注销</a></li>
	</ul>
  </div>
  <div id= "desk_list">
	<!--<div class="desk" style="background:url(imges/Note.png);
		top:20px;left:50px;" > 
		<div class="desk_con" contenteditable='true'>

		<div>
		<p><span>3</span>秒后保存</p>
	</div>
	-->
   </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
	
		document.oncontextmenu=function(){return false;}
		//当按下鼠标右键时，把菜单拉出来

		$(document).mousedown(function(e){
			var key = e.which;//当1左键，2 中间滑轮 3右键
			var x = e.clientX;
			var y = e.clientY;
			if(key==3){
				$(".Menu").css({left:x,top:y}).show();
			}
		});
		$(document).click(function(){
			$(".Menu").hide();// alert("输入的数据不符合");
		});
		//单击便签，加载
		var desk_index = -1;
		$(".Menu ul li").click(function(){
			var _index = $(this).index();
			alert(_index);
			if(_index==1){
				if(localStorage.getItem("deskindex")){
					desk_index=Math.floor(localStorage.getItem("deskindex")) ;
				    alert("得到"+desk_index);
				} 
			var l = $(".Menu").offset().left;
			var t = $(".Menu").offset().top;
			$("#desk_list").append(
			"<div class='desk' style=' width:100px height:100px ; border:2px solid #000 ;background:url(imges/Note"+sjNum()+".png);top:"+t+"px;left:"+l+"px;' ><div class='desk_con'  onmousedown = init(this) contenteditable='true'> <div><p><span>3</span>秒后保存</p></div>");
			desk_index++;
			localStorage.setItem("deskindex",desk_index);
			alert("创建"+desk_index);
			autoSave(desk_index);
			}else if(_index==2){
				//清空便签
				if (localStorage.getItem("deskArry")){
					localStorage.clear("deskArry");//清空列表标签
					localStorage.clear("deskindex");
					localStorage.clear();
					desk_index=-1;
					$("#desk_list").find(".desk").remove();
				}
			}
		});
		function sjNum(){
			return Math.floor((Math.random()*100*33)%4+1);
		}
		//利用Html5数据存储，来完成自动保存效果 
		function autoSave( msindex){
			var count = 4;
			var  clearTime = null;
			clearTime=setInterval(function(){
				count--;
				if(count<=0){
					localStorage.setItem("deskArry",$("#desk_list").html());
					clearInterval(clearTime);//清除定时器
				}
				$(".desk").eq(msindex).find("p span").text(count);
				//alert(count);
			},1000);alert("这是"+msindex);
		}
		$(function(){
			var _deskArry = localStorage ("deskArry");
			if(_deskArry) {
				$("#desk_list").append(_deskArry);
			}
		});
		/*var left = 0 , top = 0 ,xleft = 0 ,ytop = 0;
		var isOver = false;
		var zindex = 3 ;
		function init(titleDom) {
			//alert("tu");
			var thisDom = titleDom;//获取当前的title
			var parentDom = thisDom.parentNode;//获取title的对应的div
			titleDom.onmousedown = function(event){
				var e = event || window.event;//为了兼容火狐
				xleft = e.clientX;
				ytop = e.clientY;
				left = parseInt(parentDom.offsetLeft);//浏览器左边的位置
				top =e.clientY//浏览器上边的位置
				
				isOver = true;
				zindex++;
				parentDom.style.zindex = zindex;
				document.onmousemove = function(event){
					if(isOver){
						var e = event || window.event;//为了兼容ie火狐
						var newLeft = left + e.clientX - xleft ;//新的左边距
						var newTop = e.clientY ;
						//alert(" left:"+newLeft+" top:"+newTop );
						parentDom.style.left = newLeft + "px";
						parentDom.style.top = newTop + "px";
					}
				};
				document.onmouseup = function(event){
					if (isOver)
					{
						isOver = false;
					}
				};
			};
			
		};*/
	</script>
	</script>
 </BODY>
</HTML>
</span></strong>