妙味 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. 四层负载均衡——LVS

    LVS   参考:http://zh.linuxvirtualserver.org/   几个术语: Director:也可以称为调度器,LVS前端设备: realserver:也称为真实内部服务器, ...

  2. JS生成GUID算法

    //算法1 //Js代码 function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i ...

  3. Hadoop 2.2.0部署安装（笔记，单机安装）

    SSH无密安装与配置 具体配置步骤: ◎ 在root根目录下创建.ssh目录 (必须root用户登录) cd /root & mkdir .ssh chmod 700 .ssh & c ...

  4. msmms (一) sms与mms区别

    sms与mms区别 SMS,Short Messaging Service短信业务,可以通过手机等移动设备发送文本型短信.SMS这个术语最早在80年代初期出现,但一直到了90年代初才开始进入商用市场, ...

  5. ExtJS学习之路第三步：理解引擎之下,ExtJS4中的类

    写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...

  6. sql复制数据表和表结构

    SQL复制数据表 (select * into 与 insert into) select * into 目标表名 from 源表名 insert into 目标表名(fld1, fld2) sele ...

  7. IOS: 使用imageIO获取和修改图片的exif信息

    使用imageIO获取和修改图片的exif信息 一幅图片除了包含我们能看见的像素信息,背后还包含了拍摄时间,光圈大小,曝光等信息.UIImage类将这些细节信息都隐藏了起来,只提供我们关心的图片尺寸, ...

  8. zstu.4191: 无向图找环(dfs树 + 邻接表）

    4191: 无向图找环 Time Limit: 5 Sec  Memory Limit: 128 MB Submit: 117  Solved: 34 Description 给你一副无向图,每条边有 ...

  9. A+B Again（在某个数中找大于m的最小约数）

    A+B Again Accepted : 15   Submit : 243 Time Limit : 1000 MS   Memory Limit : 65536 KB  题目描述 上次趣味赛小明的 ...

  10. SSDT Hook实现简单的进程隐藏和保护【转载】

    原文链接:http://www.blogfshare.com/ssdthook-hide-protect.html 原文作者:AloneMonkey SSDT Hook实现简单的进程隐藏和保护 Alo ...