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>
秒客网

html5 (个人笔记)

相关文章
