妙味 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. C++中析构函数的作用，

    如果构造函数打开了一个文件,最后不需要使用时文件就要被关闭.析构函数允许类自动完成类似清理工作,不必调用其他成员函数.析构函数也是特殊的类成员函数.简单来说,析构函数与构造函数的作用正好相反,它用来完 ...

  2. Matlab之字符串处理

    Matlab处理字符串 1.取得部分字符串 我们有一个字符串 file='20131030_113109.TemporaryAlias.Poly5'; 简单操作举例: >> a=file( ...

  3. （源码）自己写的ScrollView里套漂亮的圆角listview（算是漂亮吧。。。）

    找了相关的资料终于写完了: http://blog.csdn.net/jamin0107/article/details/6973845 和 http://emmet1988.iteye.com/bl ...

  4. Android - 文件读写操作 总结

    在android中的文件放在不同位置,它们的读取方式也有一些不同. 本文对android中对资源文件的读取.数据区文件的读取.SD卡文件的读取及RandomAccessFile的方式和方法进行了整理. ...

  5. ZeroMQ(java)之Router/Dealer模式

    本教程转自:http://blog.csdn.net/kobejayandy/article/details/20163527 在开始之前先把guid里面提到的几个ZeroMQ的特性列一下吧: (1) ...

  6. struts/Servlet，action转到jsp后，路径问题（struts2，jsp路径，action路径，action跳转，相对路径，绝对路径）

    问题:使用struts2,如何处理action的路径?还有,在action转到的jsp中,如何写js,css,图 片的路径?(例如访问 http://localhost/project/listUse ...

  7. BestCoder Round #60 题解链接

    题解  题目 1001 GT and sequence 注意先特判000的情况:如果读入的数据有000,那么去掉所有的000且最后答案和000取一个max. 剩下的正数显然全部乘起来比较优. 对于负数 ...

  8. gcc编译C++程序

    gcc动态编译和静态编译方法 一.单个源.cpp文件生成可执行程序下面是一个保存在文件 helloworld.cpp 中一个简单的 C++ 程序的代码: /* helloworld.cpp */ #i ...

  9. 【Django】Django 直接执行原始SQL 如何防止SQL注入 ？

    代码示例: #错误--不要直接格式化字符串 query = 'SELECT * FROM myapp_person WHERE last_name = %s' % lname Person.objec ...

  10. EtherCAT数据帧结构

    EtherCAT数据直接使用以太网数据帧(以太网帧解释http://blog.chinaunix.net/uid-23080322-id-118440.html)传输,使用的帧类型为0x88A4.Et ...