时间戳

首页 > 技术文章 > html5

html5

1246447850qqcom 2015-09-22 22:51 原文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p>querySelector：选择一个元素，可以是class、name、标签、id等;eg:document.querySelector("[class=xxx]")</p>
<p>querySelectorAll：获取多个元素，返回数组，可以是class、name，标签、id等；eg:document.querySelector("#text")</p>
<p>getElementsByClassName:通过class获取元素，返回数组。</p>
<h1>class列表属性</h1>
<p>length :  class的长度</p>
<p>add()  :  添加class方法</p>
<p>remove()  :  删除class方法</p>
<p>toggle() :  切换class方法,如果存在class值就remove，如果不存在就add</p>
<p></p>
<p></p>
<p></p>
<p></p>
<form>
    <div id="text" class="clsText class1 class2"/>
    <div id="text1" class="clsText"/>
</form>

<script type="text/javascript">
    window.onload = function(){
        //querySelector表示获取一个，如果有多个时，只会对第一个生效，例如多个class、name时只会对第一个生效
        /*var oText = document.querySelector("#text");
        oText.style.height="20px";
        oText.style.width="100%";
        oText.style.background="red";*/
        
        //querySelectorAll获取全部 以数组的形式
        /*var querySAll = document.querySelectorAll(".clsText");
        alert(querySAll.length);//弹出长度2*/
        
        //getElementsByClassName获取class元素
        /*var getClssName = document.getElementsByClassName("clsText");
        alert(getClssName.classList);
        alert(getClssName.length);//弹出长度2*/
        
        //classList 获取class属性值
        var clsList = document.getElementById("text");
        //alert(clsList.classList);//弹出 clsText class1 class2
        //alert(clsList.classList.lenngth);//弹出3
        clsList.classList.add("class3");//调试页面class值为：clsText class1 class2 class3
        clsList.classList.remove("clsText");//调试页面class的值为：class1 class2 class3
        clsList.classList.toggle("clsText");//class值为：class1 class2 class3 clsText
        
        
        
    };
</script>
</body>
</html>

JOSN特性

<title>无标题文档</title>
<script src="json2.js"></script>
<script>
/*    var str = 'function show(){alert(123)}';
    eval(str);
    show();//弹出123*/
    /*var str = '{"name":"zhangsan","age":"19"}';
    var nStr = JSON.parse(str);
    alert(nStr.name);//弹出zhangsan*/
    /*var str = {name:"zhangsan",age:90};
    var nstr = JSON.stringify(str);
    alert(nstr);//弹出：{"name":"zhangsan","age":90}
    var n = JSON.parse(nstr);
    alert(n.age);//弹出90*/
</script>

</head>
<body>
eval：可以解析任何字符串变成JS，但是这样不安全<br/>
JSON.parse():一定是严格的json格式。<br/>
JSON.stringify():将json转成字符串<br/>
在IE7下不兼容的情况下，需要引入json2.js文件；http://www.json.org/去下载json2.js。在javascript下有一个json2.js文件，这样可以很好的兼容IE7低版本了。

</body>

 html5自定义属性：

<script>
    window.onload = function(){
        var z = document.getElementById("div1");
        //alert(z.dataset.zhangsan);//弹出：zhangsan-lis
        //alert(z.dataset.lisiAll);//弹出：张三呵呵呵呵呵呵呵
        alert(z.dataset.nameFirstList);//弹出：html5真神奇啊~
    };
</script>
<body>
    <div id="div1" data-zhangsan="zhangsan-lis" data-lisi-all="张三呵呵呵呵呵呵呵" data-name-first-list="html5真神奇啊~">dataset,可以无限写下去，自定义属性格式名称前面必须有”data“</div><br/>
    <p>defer : 延迟加载，会按顺序执行，在onload执行前被触发，用法为：<script src="xxxx.js" defer="defer"></script></p>
    <p>–async : 异步加载，加载完就触发，多个js时有顺序问题;并排执行多个js文件或者图片，加载速度快。用法：<script src="xxx.js" async="async"></script></p>
    <p>LABjs轻松解决了异步加载的顺序问题。</p>
</body>

 随机数，历史记录；例子随机选择彩票：

<script>
	window.onload = function(){
		var buttonE = document.getElementById("btn");
		var value = document.getElementById("div1");
		var json = {};
		buttonE.onclick = function(){
			var num = Math.random();//0-1之间的随机数
			var arr = randomNum(35,7);
			json[num] = arr;
			value.innerHTML=arr;
			window.location.hash = num;
			//value.innerHTML=randomNum(35,7);
			
		}
		window.onhashchange = function(){
		document.getElementById("div1").innerHTML = json[window.location.hash.substring(1)];//截取#号
	}
	};
	
	
	function randomNum(iAll,iNow){
		var arr =[];
		var newArr = [];
		for(var i = 1;i<=iAll;i++){
			arr.push(i);
		}
		for(var i =0;i<iNow;i++){
			newArr.push(arr.splice(Math.floor( Math.random()*arr.length),1));
		}
		return newArr;
	}
</script>
</head>

<body>
	<input type="button" id="btn" value="提交"/>
	<div id="div1"></div>
</body>

HTML5使用history对象做历史管理，需要运行在服务器端：

<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    oInput.onclick = function(){
        
        var arr = randomNum(35,7);
        
        history.pushState(arr,'',arr);
        
        oDiv.innerHTML = arr;
        
    };
    
    window.onpopstate = function(ev){
        
        oDiv.innerHTML = ev.state;
        
    };
    
    
    function randomNum(iAll,iNow){
        
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
        
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
        
        return newArr;
        
    }
    
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
<div>onhashchange  ：改变hash值来管理
history  ：


–服务器下运行


–pushState :  三个参数 ：数据  标题(都没实现)  地址(可选)


–popstate事件 :  读取数据   event.state


–注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面


</div>

</body>




 HTML5拖拽：




<title>HTML5拖拽功能</title>
<style type="text/css">
    #div1{
        width:120px;height:30px;
        background:#CCFF00;
        margin-left:20px;
    }
    #div2{
        width:120px;height:30px;
        background:#CCFF00;
        margin-top:20px;
        margin-left:20px;
    }
    #div3{
        width:120px;height:30px;
        background:#CCFF00;
        margin-top:20px;
        margin-left:20px;
    }
    #div4{
        width:200px;height:130px;
        background:#FF0000;
        margin-left:280px;
    }
</style>
</head>
<body>
    <div>
        <h1>HTML5拖拽事件</h1>
        <p>draggable ：</p>
        <p>设置为true，元素就可以拖拽了</p>
        <p>拖拽元素事件,事件对象为被拖拽元素</p>
        <p>dragstart：拖拽前触发 </p>
        <p>drag：拖拽前、拖拽结束之间，连续触发</p>
        <p>dragend：拖拽结束触发</p>
        <p>目标元素事件，事件对象为目标元素</p>
        <p>dragenter：进入目标元素触发，相当于mouseover</p>
        <p>dragover：进入目标、离开目标之间，连续触发</p>
        <p>dragleave：离开目标元素触发，相当于mouseout</p>
        <p>drop： 在目标元素上释放鼠标触发</p>
       <p>html5的执行顺序是：dragstart>drag>dragenter>dragover>dragleave>dragend </p>

</p>
    </div>
    <ul style="list-style-type:none;">
        <li id="div1" draggable="true"></li>
        <li id="div2" draggable="true"></li>
        <li id="div3" draggable="true"></li>
    </ul>
    <div id="div4"></div>
</body>
<script type="text/javascript">
    window.onload = function(){
        var liList = document.getElementsByTagName("li");
        var tagert = document.getElementById("div4");
        var i=0;
        for(var i = 0;i<liList.length;i++){
            liList[i].ondragstart = function(){//ondragstart:点击li元素拖拽时li的背景颜色变绿色，拖拽钱触发
                this.style.background="green";
            };
            
            liList[i].ondrag = function(){//ondrag:当开始拖拽和结束拖拽之间的事件。
                this.style.background="yellow";
                document.title = i++;
            };
            liList[i].ondragend = function(){//ondragend当li元素拖拽完后触发的事件。
                this.style.border="1px solid blue";
            };
        }
        tagert.ondragenter = function(){//ondragenter当元素拖拽到目标元素时发生的事件。
            this.style.border = "1px solid #00FFFF";
        };
        tagert.ondragover = function(){//li元素拖拽到目标元素之间连续发生的事件，从开始拖拽到结束拖拽时。
            this.innerHTML="我多少岁："+i++;
            ev.preventDefault();// 当阻止时ondrop事件产生
        };
        tagert.ondragleave = function(){//ondragleave拖拽到目标元素结束后触发的事件。
            this.innerHTML="亲，你松开了鼠标、或者元素已经元素路过我这里。拖拽、飘过结束了！";
        };
        tagert.ondrop = function(){
            alert(1);//移动到目标元素松开鼠标后弹出1
        };
    };
</script>




 html5解决在火狐下不能实现拖拽的，仍然在之前的基础上加：




var oUl = document.getElementsByTagName('ul')[0];
        var liList = oUl.getElementsByTagName("li");
liList[i].index = i;
            liList[i].ondragstart = function(ev){//ondragstart:点击li元素拖拽时li的背景颜色变绿色，拖拽钱触发
                var ev =ev || window.event;
                ev.dataTransfer.setData('name','hello');
                this.style.background="green";
            };

tagert.ondrop = function(ev){
            //alert(ev.dataTransfer.getData('name'));//弹出hello
            //oUl.removeChild( liList[ev.dataTransfer.getData('name')] );
            oUl.removeChild( liList[1] );
            alert(1);
        };




 HTML5图片拖拽并预览：




<title>无标题文档</title>
</head>

<body>
    <div id="div1" style="background:#0099FF;width:200px;height:190px;">请将文件拖拽至此</div>
    <ul id="ul1"></ul>
</body>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = document.getElementById("ul1");
        oDiv.ondragstart = function(){
            this.innerHTML="可以释放咯！";
            
        };
        oDiv.ondragover = function(ev){
            ev.preventDefault();
        };
        oDiv.dragleave = function(){
            this.innerHTML="将文件拖拽此处";
        };
        oDiv.ondrop = function(ev){
            ev.preventDefault();
            var fs = ev.dataTransfer.files;//得到文件，返回文件数组
            //alert(fs.length);//得到拖拽的文件个数、长度
            //alert(fs[0].type);//得到文件的类型:image/png
            for(var i =0;i<fs.length;i++){
                if(fs[i].type.indexOf('image') != -1){//判断是否为图片格式
                    var fd = new FileReader();
                    fd.readAsDataURL( fs[i]);
                    fd.onload = function(){
                        var oli = document.createElement('li');
                        var oImge = document.createElement('img');
                        oImge.src=this.result;
                        oli.appendChild(oImge);
                        oUl.appendChild(oli);
                    }
                }else{
                    oDiv.innerHTML="目前仅支持图片格式的";
                }
            }
            
        };
    };
</script>




 


　　


 


未完待续.............


 








	

		


推荐阅读