妙味 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 (个人笔记)的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  4. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  5. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  7. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  8. Html5 Canvas笔记(1)-CanvasAppTemplate代码

    学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到 ...

  9. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  10. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

随机推荐

  1. linux进程调度之 FIFO 和 RR 调度策略

    转载 http://blog.chinaunix.net/uid-24774106-id-3379478.html    linux进程调度之 FIFO 和 RR 调度策略 2012-10-19 18 ...

  2. struts返回json

    <param name="includeProperties"> </param> 这个属性表示要包含进JSON数据中的数据.<param name= ...

  3. Socket网络编程（1）

    TCP/IP 简单介绍 应用层 (Application):应用层是个很广泛的概念,有一些基本相同的系统级 TCP/IP 应用以及应用协议,也有许多的企业商业应用和互联网应用. 传输层 (Transp ...

  4. delphi基本语法

    本文参考自<delphi2010语法手册> 1. 工程文件结构 源文件联系着unit单元,delphi主模块源文件格式为.dpr,其他模块为.pas,一个完整程序由一个.dpr和若干.pa ...

  5. C++中虚函数的作用浅析

    虚函数联系到多态,多态联系到继承.所以本文中都是在继承层次上做文章.没了继承,什么都没得谈. 下面是对C++的虚函数这玩意儿的理解. 一, 什么是虚函数(如果不知道虚函数为何物,但有急切的想知道,那你 ...

  6. javascript正则——贪婪匹配

    熟悉正则的朋友都知道,正则的匹配有“贪婪”和“非贪婪”之分. “贪婪”匹配是尽可能多的匹配: 对于字符串‘aaaa’, /a+/匹配整个字符串,而非贪婪匹配/a+?/匹配的是整个字符串的第一个‘a’, ...

  7. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  8. UESTC 1817 Complete Building the Houses

    Complete Building the Houses Time Limit: 2000MS Memory Limit: 65535KB 64bit IO Format: %lld & %l ...

  9. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

  10. iPod怎么下载歌曲?用iTunes传文件功能!

    昨儿一小美女拿我的手机听歌,说她不知道iPod怎么下载歌曲,因为还在上学家里不肯给买智能机,怕会影响学业.她的iPod shuffle刚买没多久还不会往里传歌曲,让我帮看看怎么整,心想她应该是没装iT ...