妙味 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. 一分钟认识GitHub

    一分钟认识GitHub 机缘巧合之下,我开始使用 GitHub ,但事实上,刚刚入门的我不知道如何才能使 GitHub 发挥他的全部功能.不久之前,我偶然听了李福斯先生对 GitHub 的介绍,受益匪 ...

  2. C#设计模式-1、适配器模式（Adapter Pattern）（转载）

    概述 在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象”放在新的环境中应用,但是新环境要求的接口是这些现存对象所不满足的.那么如何应对这种“迁移的变化”?如何既能利用现有对象的良好实现,同 ...

  3. Session超时处理

    1.web.xml 添加配置: <!-- session超时 --> <filter> <filter-name>sessionFilter</filter- ...

  4. codevs1080线段树练习

    题目描述 Description 一行N个方格,开始每个格子里都有一个整数.现在动态地提出一些问题和修改:提问的形式是求某一个特定的子区间[a,b]中所有元素的和:修改的规则是指定某一个格子x,加上或 ...

  5. cocos基础教程(3)cocos3.x版本目录结构介绍

    简介 cocos2d-x-3.x版本进行了很多优化,比如:将TTF字体用Atlas缓存,节点重排序官方声称提升了10倍速度,查找.移除节点方面也提高了10%,拆分渲染层到独立的线程运行: 另外,coc ...

  6. MSSQL复习

    1.用户角色: 登录名就相当于一个用户 角色相当于把你的操作权限分组了 2.数据系统结构(略) 网络连接接口 关系引擎 存储引擎 内存 3.数据库的结构 数据库 架构 对象(在Sql server中将 ...

  7. raspberry树莓派安装CUPS实现打印服务器共享HP P1007打印机

    虽然很多文章提到了raspberry树莓派如何安装cups实现共享打印机服务,但是我自己试下来发现HP P1007总是无法使用,折腾了很久,终于找到了方法,记录一下. 默认raspberry树莓派已经 ...

  8. BZOJ 3540 realtime-update 解题

    分析一下题意,大约是给定一串牛,然后找到一个跨越距离最长的牛子串使得在这个范围内白牛和花牛一样多. 白牛可以任意涂成花牛. 既然"白牛可以任意涂成花牛",那么我们需要找到一个最长的 ...

  9. android.os.BadParcelableException: ClassNotFoundException when unmarshalling:解决办法

    例如在用AlarmManager的时候 AlarmManager alarmMgr = (AlarmManager) mContext .getSystemService(Context.ALARM_ ...

  10. win7 64位安装redis 及Redis Desktop Manager使用

    写基于dapper的一套自动化程序,看到 mgravell的另一个项目,StackExchange.Redis,之前在.NET上用过一段时间redis,不过一直是其它的驱动开发包,这个根据作者介绍,是 ...