学习笔记之html5相关内容

写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受。以前总是听说html5是如何的强大,如何的将要改变世界。总是充满了神秘感。首先来谈一下我接触的第一个属性是  input的里面的一个属性是 type="email"。以前用html的时候,type是有很多类型的,有text,password,summit。就是没听说过email。当得知这个email是验证输入的内容是否为email格式的时候。我顿时兴奋了。以前接触到html的时候,如果要验证输入内容时,是需要写js代码的。如果高级的话是要加入js插件的。html5直接一个email就搞定了。应了那句话,html5让世界更美好。

  学的第一个内容还是一些标签和属性之类的,可以参考一个http://www.w3school.com.cn/html5/index.asp。上面有大量的内容,不在这废话了。这里主要来介绍写的几个程序来写一下重要的知识点。

  第一个程序是关于拖拽的 主要介绍一下drag和drop

      

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

这里主要就是被拖拽的元素是加  draggable="true"  ondragstart="drag(event)"   记住被拖拽的元素要加上id的,不然是不行的

被放拖拽地方的元素加 ondrop="drop(event)" ondragover="allowDrop(event)"  也要加上id的  然后加上js代码

  <script type="text/javascript">
    function allowDrop(e) {
        e.preventDefault();
    }

    function drag(e) {
        e.dataTransfer.setData("id", e.target.id);

    }

    function drop(e) {
        e.preventDefault();
        var id = e.dataTransfer.getData("id");
        e.target.appendChild(document.getElementById(id)); //需要做的事情
        /*var block = document.getElementById(id);
        block.parentNode.removeChild(block);*/
    }
    </script>

 这样就OK了

下面一个是html5的

localStorage 方法来储存本地的查询记录,类似百度的那种

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, 
                               initial-scale=1.0,
                               maximum-scale=1.0,
                               user-scalable=no"/>
	<title></title>

	<script type="text/javascript">
	//获得焦点
		function focuse(){
			var storage = window.localStorage; //获取本地storage
			if(storage.length!=0){             //确定不为空
				document.getElementById("div1").style.display="" //显示装本地搜索历史的div
				document.getElementById("div1").innerHTML="";   //该div清空
				for(var i=0;i<storage.length;i++){              //循环出本地storage的内容
			 		document.getElementById("div1").innerHTML+=storage.getItem(i)+"<br>";
		 									}
		 							}
		 				}
		 //失去焦点
		function blure(){
		document.getElementById("div1").style.display="none"
	}
	//点击按钮执行
	function search(){
		if(window.localStorage){
			var storage = window.localStorage;
			var i=storage.length;
			var input=eval(document.getElementById("in")).value;
				if(ergodic()){            //判断内容是否与原来相同
					if(input!=""){        //判断是否为空
					localStorage.setItem(i,input);   //向本地的storage中加入内容,本地的内容是以键值对的形式存储的
					}else{
						alert("不能为空");
					}

			}else{
						
				}
			document.getElementById("in").value="";   //清空输入框的内容
		}else{
		 	alert('This browser does NOT support localStorage');
		}
	}
	//用来本次输入的内容是否和之前搜查的内容相同
	function ergodic(){
		var input=eval(document.getElementById("in")).value;
		var storage = window.localStorage;
		for(var i=0;i<storage.length;i++){
		 		  				if(input==storage.getItem(i)){
		  						return false;
		  				}
		 	/* document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");*/
		 									}
		 				return true;

	}
	//清除本地的storage
	function quit(){
		localStorage.clear();
	}
</script>
</head>
<body >
	<div >
		<div  style="margin:0 auto;">
			<div style="position:static;float:left;">
				<input id="in" type="text" style="width: 10em" onfocus="focuse()" onblur="blure()"> 
			</div>
			<div>
				<button id="button1" onclick="search()" style="float: left" >搜查</button>
			</div>
			<div>
				<button onclick="quit()">清除</button>
			</div>
		</div>
		<div  id="div1" style="border: 2px solid #F0F0F0;width:8.5em;position:static;float:none;line-height: 1.2em; display:none">
			
		</div>
	</div>
</body>

</html>

本地内容是以键值对的形式来存储的 

localStorage.setItem(i,input);  向本地加内容

localStorage.getItem(i);      从本地取内容

localStorage.clear();    清除本地内容

你可能感兴趣的:(学习笔记之html5相关内容)