html5 (个人笔记)

妙味 html5  1.0

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="a">3434</div>
<script>
//    var obj=document.querySelector("div");
    var obj=document.querySelector(".a");
//querySelector(); 可以选择 标签 类 id 只选择第一个，  querySelectorAll() 先所有  ie9以上兼容
//var obj=document.getElementsByClassName("a");   /* 选择 class元素  ie9以上兼容*/
    obj.style.backgroundColor='blue';
</script>

    <div id="div1" class="box1 box2 box3">div</div>
    <script>
        var oDiv=document.getElementById("div1");
        oDiv.classList.add('box4');
        oDiv.classList.toggle('box2');  //切换class  有 box2就删除，没有就添加
        //   remove()  length()
    </script>

    <script>

        //eval : 可以解析任何字符串变成JS
        //parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)

        /*var str = 'function show(){alert(123)}';
         eval(str);
         show();*/

        /*var str = '{"name":"hello"}';   //一定是严格的JSON形式   字符串转换成json
         var json = JSON.parse(str);
         alert( json.name );*/

     /*   var json = {"name" : "hello"};    // 把 json转成 字符串
        var str = JSON.stringify(json);
        alert( str );
*/

    /*    var a={
            name:'he'
        }
        var b=a;
        b.name='123';
        alert("a.name: "+a.name);    // a.name: hello  a变了
    */
    /*    var a={
            name:'he'
        }
        var b={};
        for(var attr in a){
            b[attr]=a[attr];
        }
        b.name='123';
        alert("a.name: "+ a.name);   // a.name: he   不改变
*/
  /*      var a={
            name:'he'
        }
        var str=JSON.stringify(a);   //  ie 6 7 不兼容   官网下载www.json.org  json2.js
        var b=JSON.parse(str);
        b.name='55';
        alert("a.name: "+ a.name);      // a.name:he  不改变*/
    </script>
    <h1>获取自定义属性,jquery-mobile 喜欢自定义属性</h1>
    <!--<div id="div2" data-miaov="中国">div</div>-->
   <!-- <div id="div2" data-miaov-all="中国2">div</div>
    <script>
        var oDiv=document.getElementById("div2");
       alert(oDiv.dataset.miaovAll);
    </script>-->

    <!--
    延迟加载，指先加载html再加载 js  相当于把 js 写在html下面
    <script src="b.js" defer="defer"></script>

    async ="async" 异步  跟页面同时加载  可能 出现  找不到对象的错误
    -->
    <input type="button" value="随机选择" id="input1">
    <div id="div5"></div>
    <script>
        var oInput = document.getElementById('input1');
        var oDiv = document.getElementById('div5');
        var json={};  // json对象里面存数组
        oInput.onclick= function () {
            var num = Math.random();
            var arr=randomNum(35,25);
            json[num]=arr;      //  把5个数及对应在的num 存储起来
            oDiv.innerHTML=arr;  //  把5个数显示出来
            window.location.hash=num;    // 任意数   hash值 num
           //oDiv.innerHTML=randomNum(35,5);
        }
        window.onhashchange= function () {   // 通过 hash值 num 找对应的数组      pushState 不能刷新，没试
            oDiv.innerHTML=json[window.location.hash.substring(1)];
        }
        function randomNum(iAll,iNow){
            var arr=[];
            var newArr=[];
            for(var i=0;i<=iAll;i++){
//                arr.push(i);
                arr[i]=i;
            }
//            alert(arr);
            for(var i=0;i<iNow;i++){
//                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
                newArr[i]= arr.splice( Math.floor(Math.random()*arr.length) ,1);  //  从已有的数组随机删除1个数，把删除的数赋给数组
//                newArr[i]=arr[Math.floor(Math.random()*arr.length)];   // 这里写可能出现重复数字
            }
            return newArr;
        }
/*        var a={};
        a[1]=1;
//        alert(typeof(a));   // 查看数据类型*/
    </script>
</body>
</html>