标签：
写一下昨天学习的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 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
当放置被拖数据时，会发生 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的
<!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(); 清除本地内容
标签：
原文地址：http://www.cnblogs.com/ouzilin/p/5116917.html
