[关闭]
@fantaghiro 2014-12-17T09:15:02.000000Z 字数 50066 阅读 2476

妙味课堂-HTML5

学习笔记 js 前端 妙味课堂 HTML5

新增的语义化标签

新的页面结构以及宽松的语法规范

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.     </body>
  9. </html>

新的结构化元素

语义化标签

  1. <hgroup>
  2.     <h1>妙味课堂</h1>
  3.     <h2>待您进入富有人情味的IT培训</h2>
  4. </hgroup>
  1. <nav><a href="#">链接</a><a href="#">链接</a></nav>
  2. ---
  3. <nav>
  4.     <p><a href="#">妙味课堂</a></p>
  5.     <p><a href="#">妙味课堂</a></p>
  6. </nav>
  7. ---
  8. <nav>
  9.     <h2>妙味精品课程</h2>
  10.     <ul>
  11.         <li><a href="#">javascript</a></li>
  12.         <li><a href="#">html+css</a></li>
  13.     </ul>
  14. </nav>
  1. <figure>
  2.     <img src="miaov.png" /> //注意没有alt
  3.     <figcaption>妙味课堂 photo&copy 妙味趣学</figcaption>
  4. </figure>
  1. <p>
  2.     我们在每天早上<time>9:00</time>开始营业。
  3. </p>
  4. <p>
  5.     我在<time datetime="2008-02-14">情人节</time>有个约会。
  6. </p>
  1. <input type="text" list="valList" />
  2. <datalist id="valList">
  3.     <option value="javascript">javascript</option>
  4.     <option value="html">html</option>
  5.     <option value="css">css</option>
  6. </datalist>
  1. <details>
  2.     <summary>妙味课堂</summary>
  3.     <p>国内将知名的IT培训机构</p>
  4. </details>
  1. <dialog>
  2.     <dt>老师</dt>
  3.     <dd>2+2等于？</dd>
  4.     <dt>学生</dt>
  5.     <dd>4</dd>
  6.     <dt>老师</dt>
  7.     <dd>答对了！</dd>
  8. </dialog>
  1. <form action="http://www.baidu.com" method="get">
  2.     用户：<input type="text" name="usr_name" />
  3.     公钥：<keygen name="security" />
  4.     <input type="submit">
  5. </form>
  1. <progress max="100" value="76">
  2.     <span>76</span>% //该行用于向下兼容
  3. </progress>

IE下的兼容

  1. <script>
  2.     document.createElement('header');
  3.     document.createElement('nav');
  4.     document.createElement('footer');
  5.     ...
  6. </script>

forms

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单的验证反馈</title>
  6. </head>
  7. <body>
  8.     <form>
  9.         <input type="text" required id="text" pattern="d{1,5}" maxlength="5">
  10.         <input type="submit">
  11.     </form>
  12.     <script>
  13.         var oText = document.getElementById('text');
  14.         oText.addEventListener('invalid', fn, false);
  15.         function fn(){
  16.             // alert(this.validity);
  17.             // alert(this.validity.valid);
  18.             // alert(this.validity.valueMissing);
  19.             // alert(this.validity.typeMismatch);
  20.             // alert(this.validity.patternMismatch);
  21.             // alert(this.validity.tooLong);
  22.             ev.preventDefault();
  23.         }
  25.         //valueMissing: 当输入值为空时，返回true
  26.         //typeMismatch: 当输入类型和要求的类型不一致时，返回true
  27.         //patternMismatch: 当输入内容和预期的正则是不匹配时，返回true
  28.         //tooLong: 当输入内容的长度超出了maxlength的限制，返回true
  29.     </script>
  30. </body>
  31. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单的验证反馈</title>
  6. </head>
  7. <body>
  8.     <form>
  9.         <input type="text" id="text">
  10.         <input type="submit">
  11.     </form>
  12.     <script>
  13.         var oText = document.getElementById('text');
  14.         oText.addEventListener('invalid', fn, false);
  15.         oText.oninput = function(){
  16.             if(this.value == '敏感词'){
  17.                 this.setCustomValidity('请不要输入敏感词');
  18.             } else {
  19.                 this.setCustomValidity('');
  20.             }
  21.         }
  22.         function fn(){
  23.             alert(this.validity.customError);
  24.             ev.preventDefault(); 
  25.         }
  27.         //customError: 不符合自定义验证的时候，返回true
  28.     </script>
  29. </body>
  30. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form action="http://www.baidu.com">
  9.         <input type="text" placeholder="请输入4—16个字符" name="user" pattern="d{4,16}" required />
  10.         <input type="submit" value="提交" />
  11.         <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" formnovalidate />
  12.     </form>
  13. </body>
  14. </html>

HTML5新特性的浏览器支持情况

http://www.caniuse.com/#index

新的选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>新的选择器</title>
  6.     <script>
  7.         // document.getElementById();
  8.         // document.getElementsByTagName();
  9.         //$('#div1') $('.box') $('ul li')
  11.         window.onload = function(){
  12.             //querySelector只能选择到一组元素中的第一个元素
  13.             // var oDiv = document.querySelector('#div1'); //id形式
  14.             // var oDiv = document.querySelector('div'); //标签形式 
  15.             // var oDiv = document.querySelector('.box'); //class形式
  16.             var oDiv = document.querySelector('[title=hello]'); //通过属性值查找
  18.             oDiv.style.background = 'red';
  20.             //querySelectorAll 选择到一组元素
  21.             var aDiv = document.querySelectorAll('.box');
  22.             alert(aDiv.length);
  23.             aDiv[1].style.background = "blue";
  25.             var aBox = document.getElementsByClassName('box');
  26.             alert(aBox.length);
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="div1" class="box" title="hello">div</div>
  32.     <div class="box">div2</div>
  33.     <p class="box">p</p>
  34. </body>
  35. </html>

获取class列表属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>class列表属性</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oDiv = document.querySelector('#div1');
  9.             // alert(oDiv.classList); //box1 box2 box3
  10.             // alert(typeof oDiv.classList); //object 类似于数组的对象
  11.             // alert(oDiv.classList.length); //3
  12.             oDiv.classList.add('box4');
  13.             oDiv.classList.remove('box2');
  14.             oDiv.classList.toggle('box3'); //如果原本有box3，就remove；如果没有，就add
  15.         }
  16.     </script>
  17. </head>
  18. <body>
  19.     <div id="div1" class="box1 box2 box3">div</div>
  20. </body>
  21. </html>

JSON的新方法

parse()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>json的新方法</title>
  6.     <script>
  7.     /* 用eval
  8.         var str = 'function show(){alert(123)}';
  9.         eval(str); //eval能把字符串转为js
  10.         show();
  11.     */
  12.     //eval可以解析任何字符串变成JS
  13.     //parse只能解析json形式的字符串变成js （安全性更高一些）
  15.     /* 报错，因为parse转不了function这样的字符串
  16.         var str = 'function show(){alert(123)}';
  17.         JSON.parse(str); //eval能把字符串转为js
  18.         show();
  19.     */
  21.     /* 报错，这里的name没有加双引号就不行
  22.         var str = '{name: "hello"}';
  23.         var json = JSON.parse(str);
  24.         alert(json.name);
  25.     */
  27.         var str = '{"name": "hello"}'; //一定是严格的json形式
  28.         var json = JSON.parse(str);
  29.         alert(json.name); //弹出hello
  30.     </script>
  31. </head>
  32. <body>
  33. </body>
  34. </html>

stringify()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>json的新方法</title>
  6.     <script>
  7.         var json = {name: "hello"};
  8.         var str = JSON.stringify(json);
  9.         alert(str); //{"name":"hello"}
  10.     </script>
  11. </head>
  12. <body>
  13. </body>
  14. </html>

对象拷贝

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象的拷贝</title>
  6.     <script>
  7.         var a = {
  8.             name: 'hello'
  9.         }
  11.         /*
  12.         //浅拷贝
  13.         var b = {};
  14.         for(var attr in a){
  15.             b[attr] = a[attr];
  16.         }
  17.         */
  19.         //用parse()和stringify()来实现
  22.         var str = JSON.stringify(a);
  23.         var b = JSON.parse(str);
  25.         b.name = 'hi';
  26.         alert(a.name); //hello
  27.     </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

data自定义数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>data自定义数据</title>
  6.     <script>
  7.         window.onload = function(){
  8.             //getAttribute
  10.             var oDiv = document.querySelector('#div1');
  11.             alert(oDiv.dataset.miaov);
  12.             alert(oDiv.dataset.miaovAll);
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div1" data-miaov="妙味" data-miaov-all="妙味课堂"></div>
  18. </body>
  19. </html>

延迟加载JS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JS加载</title>
  6.     <script src="a.js"></script>
  7.     <script src="b.js"></script>
  8.     <script src="c.js"></script>
  9.     <!-- 解决方法 -->
  10.     <!-- 1. 把script放到body底部 -->
  11.     <!-- 2. 给外部的script添加 defer = "defer" 这个是延迟到onload执行前触发 -->
  12.     <!-- 3. 给script添加 async = "async" 加上异步，就代表是与其他内容并排加载的-->
  13. </head>
  14. <body>
  15.     <!-- 默认上面所有的js都加载完毕之后，再加载img -->
  16.     <img src="1.jpg" alt="">
  17. </body>
  18. </html>

历史管理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  9.             var oDiv = document.getElementById('div1');
  11.             oInput.onclick = function(){
  12.                 var number = randomNum(35, 7);
  13.                 oDiv.innerHTML = number;
  14.             }
  16.             function randomNum(all, now){
  17.                 var arr = [];
  18.                 var newArr = [];
  19.                 for(var i=1; i<=all; i++){
  20.                     arr.push(i);
  21.                 }
  22.                 for(var i=0; i<now; i++){
  23.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  24.                 }
  25.                 return newArr;
  26.             }
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <input type="button" value="35选7" id="input1">
  32.     <div id="div1"></div>
  33. </body>
  34. </html>

采用onhashchange的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  8.         //onhashchange : 事件 当hash值有变化的时候，就会触发
  10.         window.onload = function(){
  11.             var oInput = document.getElementById('input1');
  12.             var oDiv = document.getElementById('div1');
  13.             var obj = {};
  15.             oInput.onclick = function(){
  16.                 var number = randomNum(35, 7);
  17.                 oDiv.innerHTML = number;
  18.                 var oRD = Math.random();
  19.                 obj[oRD] = number;
  20.                 window.location.hash = oRD;
  21.             }
  23.             window.onhashchange = function(){
  24.                 var number = obj[window.location.hash.substring(1)] || '';
  25.                 oDiv.innerHTML = number;
  26.             }
  28.             function randomNum(all, now){
  29.                 var arr = [];
  30.                 var newArr = [];
  31.                 for(var i=1; i<=all; i++){
  32.                     arr.push(i);
  33.                 }
  34.                 for(var i=0; i<now; i++){
  35.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  36.                 }
  37.                 return newArr;
  38.             }
  39.         }
  40.     </script>
  41. </head>
  42. <body>
  43.     <input type="button" value="35选7" id="input1">
  44.     <div id="div1"></div>
  45. </body>
  46. </html>

用html5的history对象来实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  9.             var oDiv = document.getElementById('div1');
  10.             var iNow = 1;
  12.             oInput.onclick = function(){
  13.                 var number = randomNum(35, 7);
  14.                 oDiv.innerHTML = number;
  15.                 history.pushState(number, '', iNow++);
  16.             }
  18.             window.onpopstate = function(ev){
  19.                 var number = ev.state || '';
  20.                 oDiv.innerHTML = number;
  21.             }
  23.             function randomNum(all, now){
  24.                 var arr = [];
  25.                 var newArr = [];
  26.                 for(var i=1; i<=all; i++){
  27.                     arr.push(i);
  28.                 }
  29.                 for(var i=0; i<now; i++){
  30.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  31.                 }
  32.                 return newArr;
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  38.     <input type="button" value="35选7" id="input1">
  39.     <div id="div1"></div>
  40. </body>
  41. </html>

拖放事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖放操作</title>
  6.     <style>
  7.         li {width: 100px; height: 30px; background: yellow; margin: 10px; list-style: none;}
  8.         #div1 {width: 100px; height: 100px; background: red; margin: 200px;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var aLi = document.querySelectorAll('li');
  13.             var oDiv = document.querySelector('#div1');
  14.             var i = 0;
  16.             for(var i=0; i<aLi.length; i++){
  17.                 aLi[i].ondragstart = function(){
  18.                     this.style.background = 'green';
  19.                 }
  21.                 aLi[i].ondrag = function(){
  22.                     // document.title = i++;
  23.                 }
  25.                 aLi[i].ondragend = function(){
  26.                     this.style.background = 'yellow';
  27.                 }
  28.             }
  30.             oDiv.ondragenter = function(){
  31.                 this.style.background = 'blue';
  32.             }
  34.             oDiv.ondragover = function(ev){
  35.                 // document.title = i++;
  36.                 // 要想触发drop事件，就必须在dragover当中阻止默认事件
  37.                 var ev = ev || window.event;
  38.                 ev.preventDefault();
  39.             }
  41.             oDiv.ondragleave = function(){
  42.                 this.style.background = 'red';
  43.             }
  45.             oDiv.ondrop = function(){
  46.                 alert(123);
  47.             }
  48.         }
  49.     </script>
  50. </head>
  51. <body>
  52.     <ul>
  53.         <li draggable="true">a</li>
  54.         <li draggable="true">b</li>
  55.         <li draggable="true">c</li>
  56.     </ul>
  57.     <div id="div1"></div>
  58. </body>
  59. </html>

实现火狐下的拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖放操作——解决火狐的问题</title>
  6.     <style>
  7.         li {width: 100px; height: 30px; background: yellow; margin: 10px; list-style: none;}
  8.         #div1 {width: 100px; height: 100px; background: red; margin: 200px;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var aLi = document.querySelectorAll('li');
  13.             var oDiv = document.querySelector('#div1');
  14.             var i = 0;
  16.             for(var i=0; i<aLi.length; i++){
  17.                 aLi[i].ondragstart = function(ev){
  18.                     var ev = ev || window.event;
  19.                     ev.dataTransfer.setData('name', 'hello'); //火狐下面的操作 设置过这个就可以拖放了
  20.                     this.style.background = 'green';
  21.                 }
  23.                 aLi[i].ondrag = function(){
  24.                     // document.title = i++;
  25.                 }
  27.                 aLi[i].ondragend = function(){
  28.                     this.style.background = 'yellow';
  29.                 }
  30.             }
  32.             oDiv.ondragenter = function(){
  33.                 this.style.background = 'blue';
  34.             }
  36.             oDiv.ondragover = function(ev){
  37.                 // document.title = i++;
  38.                 // 要想触发drop事件，就必须在dragover当中阻止默认事件
  39.                 var ev = ev || window.event;
  40.                 ev.preventDefault();
  41.             }
  43.             oDiv.ondragleave = function(){
  44.                 this.style.background = 'red';
  45.             }
  47.             oDiv.ondrop = function(ev){
  48.                 var ev = ev || window.event;
  49.                 alert(ev.dataTransfer.getData('name')); //可以setData就可以getData
  50.                 alert(123);
  51.             }
  52.         }
  53.     </script>
  54. </head>
  55. <body>
  56.     <ul>
  57.         <li draggable="true">a</li>
  58.         <li draggable="true">b</li>
  59.         <li draggable="true">c</li>
  60.     </ul>
  61.     <div id="div1"></div>
  62. </body>
  63. </html>

拖拽删除列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖拽删除列表</title>
  6.     <style>
  7.         li {width: 100px; height: 30px; background: yellow; margin: 10px; list-style: none;}
  8.         #div1 {width: 100px; height: 100px; background: red; margin: 200px;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var aLi = document.querySelectorAll('li');
  13.             var oDiv = document.querySelector('#div1');
  14.             var oUl = document.querySelector('#ul1')
  15.             var i = 0;
  17.             for(var i=0; i<aLi.length; i++){
  18.                 aLi[i].index = i;
  19.                 aLi[i].ondragstart = function(ev){
  20.                     var ev = ev || window.event;
  21.                     ev.dataTransfer.setData('name', this.index);
  22.                     this.style.background = 'green';
  23.                 }
  25.                 aLi[i].ondrag = function(){
  26.                     // document.title = i++;
  27.                 }
  29.                 aLi[i].ondragend = function(){
  30.                     this.style.background = 'yellow';
  31.                 }
  32.             }
  34.             oDiv.ondragenter = function(){
  35.                 this.style.background = 'blue';
  36.             }
  38.             oDiv.ondragover = function(ev){
  39.                 // document.title = i++;
  40.                 // 要想触发drop事件，就必须在dragover当中阻止默认事件
  41.                 var ev = ev || window.event;
  42.                 ev.preventDefault();
  43.             }
  45.             oDiv.ondragleave = function(){
  46.                 this.style.background = 'red';
  47.             }
  49.             oDiv.ondrop = function(ev){
  50.                 var ev = ev || window.event;
  51.                 oUl.removeChild(aLi[ev.dataTransfer.getData('name')]);
  52.                 for(var i=0; i<aLi.length; i++){
  53.                     aLi[i].index = i;
  54.                 }
  55.             }
  56.         }
  57.     </script>
  58. </head>
  59. <body>
  60.     <ul id="ul1">
  61.         <li draggable="true">a</li>
  62.         <li draggable="true">b</li>
  63.         <li draggable="true">c</li>
  64.     </ul>
  65.     <div id="div1"></div>
  66. </body>
  67. </html>

effectAllowed和setDragImage

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖放操作——effectAllowed和setDragImage</title>
  6.     <style>
  7.         li {width: 100px; height: 30px; background: yellow; margin: 10px; list-style: none;}
  8.         #div1 {width: 100px; height: 100px; background: red; margin: 200px;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var aLi = document.querySelectorAll('li');
  13.             var oDiv = document.querySelector('#div1');
  14.             var oUl = document.querySelector('#ul1');
  15.             var oImg = document.querySelector('img');
  16.             var i = 0;
  18.             for(var i=0; i<aLi.length; i++){
  19.                 aLi[i].ondragstart = function(ev){
  20.                     var ev = ev || window.event;
  21.                     ev.dataTransfer.setData('name', 'hello');
  22.                     ev.dataTransfer.effectAllowed = 'link';
  23.                     ev.dataTransfer.setDragImage(oImg, 0, 0);
  25.                 }
  27.                 aLi[i].ondrag = function(){
  28.                 }
  30.                 aLi[i].ondragend = function(){
  31.                     this.style.background = 'yellow';
  32.                 }
  33.             }
  35.             oDiv.ondragenter = function(){
  36.                 this.style.background = 'blue';
  37.             }
  39.             oDiv.ondragover = function(ev){
  40.                 var ev = ev || window.event;
  41.                 ev.preventDefault();
  42.             }
  44.             oDiv.ondragleave = function(){
  45.                 this.style.background = 'red';
  46.             }
  48.             oDiv.ondrop = function(ev){
  50.             }
  51.         }
  52.     </script>
  53. </head>
  54. <body>
  55.     <ul id="ul1">
  56.         <li draggable="true">a</li>
  57.         <li draggable="true">b</li>
  58.         <li draggable="true">c</li>
  59.     </ul>
  60.     <div id="div1"></div>
  61.     <img src="img/ppt.gif" style="display: none;">
  62. </body>
  63. </html>

拖放外部文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖放操作——拖放外部文件</title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; margin: 100px;}
  8.     </style>
  9.     <script>
  10.         window.onload = function(){
  11.             var oDiv = document.querySelector('#div1');
  12.             var oImg = document.querySelector('img');
  13.             var i = 0;
  15.             oDiv.ondragenter = function(){
  16.                 this.innerHTML = '可以释放啦';
  17.             }
  19.             oDiv.ondragover = function(ev){
  20.                 var ev = ev || window.event;
  21.                 ev.preventDefault();
  22.             }
  24.             oDiv.ondragleave = function(){
  25.                 this.innerHTML = '将文件拖拽到此区域';
  26.             }
  28.             oDiv.ondrop = function(ev){
  29.                 var ev = ev || window.event;
  30.                 ev.preventDefault();
  31.                 var fs = ev.dataTransfer.files;
  32.                 // alert(fs); //object Filelist
  33.                 // alert(fs.length);
  34.                 // alert(fs[0].type); //文件类型
  35.                 var fd = new FileReader();
  36.                 fd.readAsDataURL(fs[0]);
  37.                 fd.onload = function(){ //上面文件信息读取成功之后就会走这个onload
  38.                     alert(this.result);
  39.                 }
  40.             }
  41.         }
  42.     </script>
  43. </head>
  44. <body>
  45.     <div id="div1">将文件拖拽到此区域</div>
  46. </body>
  47. </html>

图片预览功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片预览</title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red; margin: 100px;}
  8.     </style>
  9.     <script>
  10.         window.onload = function(){
  11.             var oDiv = document.querySelector('#div1');
  12.             var oUl = document.getElementById('ul1')
  13.             var oImg = document.querySelector('img');
  14.             var i = 0;
  16.             oDiv.ondragenter = function(){
  17.                 this.innerHTML = '可以释放啦';
  18.             }
  20.             oDiv.ondragover = function(ev){
  21.                 var ev = ev || window.event;
  22.                 ev.preventDefault();
  23.             }
  25.             oDiv.ondragleave = function(){
  26.                 this.innerHTML = '将文件拖拽到此区域';
  27.             }
  29.             oDiv.ondrop = function(ev){
  30.                 var ev = ev || window.event;
  31.                 ev.preventDefault();
  32.                 var fs = ev.dataTransfer.files;
  33.                 /*if(fs[0].type.indexOf('image') != -1){
  34.                     var fd = new FileReader();
  35.                     fd.readAsDataURL(fs[0]);
  36.                     fd.onload = function(){ 
  37.                         var oLi = document.createElement('li');
  38.                         var oImg = document.createElement('img');
  39.                         oImg.src = this.result;
  40.                         oLi.appendChild(oImg);
  41.                         oUl.appendChild(oLi);
  42.                     }
  43.                 } else {
  44.                     alert('亲，请上传图片类型！');
  45.                 }   */
  46.                 for(var i=0; i<fs.length; i++){
  47.                     if(fs[i].type.indexOf('image') != -1){
  48.                         var fd = new FileReader();
  49.                         fd.readAsDataURL(fs[i]);
  50.                         fd.onload = function(){ 
  51.                             var oLi = document.createElement('li');
  52.                             var oImg = document.createElement('img');
  53.                             oImg.src = this.result;
  54.                             oLi.appendChild(oImg);
  55.                             oUl.appendChild(oLi);
  56.                         }
  57.                     } else {
  58.                         alert('亲，请上传图片类型！');
  59.                     }
  60.                 }
  61.             }
  62.         }
  63.     </script>
  64. </head>
  65. <body>
  66.     <div id="div1">将文件拖拽到此区域</div>
  67.     <ul id="ul1"></ul>
  68. </body>
  69. </html>

拖拽购物车

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>拖拽购物车</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         li {list-style: none;}
  9.         li {float: left; width: 200px; border: 1px solid #000; margin: 10px;}
  10.         li img {width: 200px;}
  11.         p {border-bottom: 1px dashed #333; height: 20px;}
  12.         #div1 {width: 600px; border: 1px solid #000; height: 300px; clear: both;}
  13.         .box1 {float: left; width: 200px;}
  14.         .box2 {float: left; width: 200px;}
  15.         .box3 {float: left; width: 200px;}
  16.         #allMoney {float: right;}
  17.     </style>
  18.     <script>
  19.         window.onload = function(){
  20.             var aLi = document.getElementsByTagName('li');
  21.             var oDiv = document.getElementById('div1');
  22.             var obj = {};
  23.             var iNum = 0;
  24.             var allMoney = null;
  26.             for(var i=0; i<aLi.length; i++){
  27.                 aLi[i].ondragstart = function(ev){
  28.                     var aP = this.getElementsByTagName('p');
  29.                     var ev = ev || window.event;
  30.                     ev.dataTransfer.setData('title', aP[0].innerHTML);
  31.                     ev.dataTransfer.setData('money', aP[1].innerHTML);
  32.                     ev.dataTransfer.setDragImage(this, 0, 0);
  33.                 }
  34.             }
  36.             oDiv.ondragover = function(ev){
  37.                 ev.preventDefault();
  38.             }
  40.             oDiv.ondrop = function(ev){
  41.                 ev.preventDefault();
  43.                 var sTitle = ev.dataTransfer.getData('title');
  44.                 var sMoney = ev.dataTransfer.getData('money');
  46.                 if(!obj[sTitle]){
  47.                     var oP = document.createElement('p');
  48.                     var oSpan = document.createElement('span');
  49.                     oSpan.className = 'box1';
  50.                     oSpan.innerHTML = 1;
  51.                     oP.appendChild(oSpan);
  52.                     var oSpan = document.createElement('span');
  53.                     oSpan.className = 'box2';
  54.                     oSpan.innerHTML = sTitle;
  55.                     oP.appendChild(oSpan);
  56.                     var oSpan = document.createElement('span');
  57.                     oSpan.className = 'box3';
  58.                     oSpan.innerHTML = sMoney;
  59.                     oP.appendChild(oSpan);
  61.                     oDiv.appendChild(oP);
  63.                     obj[sTitle] = 1;
  64.                 } else {
  65.                     var box1 = document.getElementsByClassName('box1');
  66.                     var box2 = document.getElementsByClassName('box2');
  68.                     for(var i=0; i<box2.length; i++){
  69.                         if(box2[i].innerHTML == sTitle){
  70.                             box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
  71.                         }
  72.                     }
  73.                 }
  75.                 if(!allMoney){
  76.                     allMoney = document.createElement('div');
  77.                     allMoney.id = 'allMoney';
  78.                 }
  79.                 iNum += parseInt(sMoney.substring(1));
  80.                 allMoney.innerHTML = '￥' + iNum;
  81.                 oDiv.appendChild(allMoney);
  82.             }
  83.         }
  84.     </script>
  85. </head>
  86. <body>
  87.     <ul>
  88.         <li draggable="true">
  89.             <img src="images/1.png">
  90.             <p>javascript语言精粹</p>
  91.             <p>￥40</p>
  92.         </li>
  93.         <li draggable="true">
  94.             <img src="images/2.png">
  95.             <p>javascript权威指南</p>
  96.             <p>￥120</p>
  97.         </li>
  98.         <li draggable="true">
  99.             <img src="images/3.png">
  100.             <p>精通javascript</p>
  101.             <p>￥35</p>
  102.         </li>
  103.         <li draggable="true">
  104.             <img src="images/4.png">
  105.             <p>DOM编程艺术</p>
  106.             <p>￥45</p>
  107.         </li>
  108.     </ul>
  109.     <div id="div1">
  110.         <!-- <p>
  111.             <span class="box1">1</span>
  112.             <span class="box2">DOM编程艺术</span>
  113.             <span class="box3">￥45</span>
  114.         </p>
  115.         <p>
  116.             <span class="box1">1</span>
  117.             <span class="box2">DOM编程艺术</span>
  118.             <span class="box3">￥45</span>
  119.         </p>
  120.         <div id="allMoney">￥90</div> -->
  121.     </div>
  122. </body>
  123. </html>

跨文档消息通信

postMessage对象

通过iframe进行窗口间通信(同域)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title></title>
  6. <script>
  7. /*
  8. 我们可以通过js去访问被包含页面的DOM元素
  9. */
  10. window.onload = function() {
  12.     var oBtn = document.getElementById('btn');
  13.     var oMyIframe = document.getElementById('myframe');
  15.     oBtn.onclick = function() {
  17.         //如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window
  18.         //oMyIframe.contentWindow -> 被iframe包含的页面的window对象
  19.         //alert(oMyIframe.contentWindow);
  21.         oMyIframe.contentWindow.document.body.style.background = 'red';
  22.     }
  23. }
  24. </script>
  25. </head>
  27. <body>
  28.     <input type="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
  29.     <iframe id="myframe" src="2.iframe.html"></iframe>
  30. </body>
  31. </html>

通过window.open来进行窗口间通信（同域）

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     var oBtn = document.getElementById('btn');
  10.     var oBtn2 = document.getElementById('btn2');
  11.     var newWindow = null;
  13.     oBtn.onclick = function() {
  14.         //window.open 返回被打开窗口的window对象
  15.         newWindow = window.open('4.window.open.html', '_blank');    
  16.     }
  18.     oBtn2.onclick = function() {
  19.         newWindow.document.body.style.background = 'red';
  20.     }
  21. }
  22. </script>
  23. </head>
  25. <body>
  26.     <input type="button" value="点击我，开启一个新的窗口打开4.window.open.html页面" id="btn" />
  27.     <input type="button" value="点击我，改变4.window.open.html页面的背景色" id="btn2" />
  28. </body>
  29. </html>

通过postMessage进行跨域的窗口通信 发送消息

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     var oBtn = document.getElementById('btn');
  10.     var oMyIframe = document.getElementById('myframe');
  12.     /*
  13.         postMessage : 可以通过这个方法给另外一个窗口发送信息
  15.         接收消息的窗口的window对象.postMessage();
  16.     */
  18.     oBtn.onclick = function() {
  20.         //当本页面和包含页面不在同一个域名下的时候，这样操作就会有跨域操作安全限制问题。
  22.         //oMyIframe.contentWindow.document.body.style.background = 'red';
  24.         /*
  25.         第一个参数：发送的数据
  26.         第二个参数：接收数据的域名｛带上协议｝
  27.         */
  29.         oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');
  30.         //alert(oMyIframe.contentWindow.postMessage)
  32.     }
  34. }
  35. </script>
  36. </head>
  38. <body>
  39.     <input type="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
  40.     <iframe id="myframe" src="http://www.b.com/3.postMessage.html"></iframe>
  41. </body>
  42. </html>

通过message接收postMessage发来的信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.     window.onload = function(){
  8.         /*
  9.         message: 当窗口接收到通过postMessage发送过来的数据的时候触发
  10.          */
  12.         window.addEventListener('message', function(ev){
  13.             //alert('b.com下的页面接受到了内容了')
  15.             //message事件的事件对象保存了发送过来的内容
  16.             //ev.data: 发送过来的数据
  17.             //ev.origin: 发送消息的来源域
  19.             //alert('我接受到了a.com页面发送过来的数据，内容是：'+ ev.data)
  20.             //alert(ev.origin);
  22.             if(ev.origin == 'www.a.com' && ev.data == '1'){
  23.                 document.body.style.background = 'red';
  24.             }
  25.         }, false);
  26.     }
  27.     </script>
  28. </head>
  29. <body>
  30.     这是b.com的potMessage.html页面
  31. </body>
  32. </html>

XMLHttpRequest Level 2

Ajax获取同域下的内容

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     var oBtn = document.getElementById('btn');
  11.     oBtn.onclick = function() {
  13.         var xhr = new XMLHttpRequest();
  14.         xhr.onreadystatechange = function() {
  15.             if (xhr.readyState == 4) {
  16.                 if (xhr.status == 200) {
  17.                     alert(xhr.responseText);
  18.                 }
  19.             }
  20.         }
  21.         xhr.open('get', 'ajax.php', true);
  22.         xhr.send();
  24.     }
  26. }
  27. </script>
  28. </head>
  30. <body>
  31.     <input type="button" value="获取同域下内容" id="btn" />
  32. </body>
  33. </html>

IE下的跨域请求

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     /*
  10.     在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
  11.     但是，如果想实现跨域请求，还需要后端的相关配合才可以
  13.     XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
  15.     XDomainRequest : IE如果想实现跨域请求，则需要使用另外一个对象去实现
  16.     */
  17.     var oBtn = document.getElementById('btn');
  19.     oBtn.onclick = function() {
  21.         /*var xhr = new XMLHttpRequest();
  22.         xhr.onreadystatechange = function() {
  23.             if (xhr.readyState == 4) {
  24.                 if (xhr.status == 200) {
  25.                     alert(xhr.responseText);
  26.                 }
  27.             }
  28.         }
  29.         xhr.open('get', 'http://www.b.com/ajax.php', true);
  30.         xhr.send();*/
  32.         var oXDomainRequest = new XDomainRequest();
  33.         oXDomainRequest.onload = function() {
  34.             alert(this.responseText);
  35.         }
  36.         oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
  37.         oXDomainRequest.send();     
  38.     }   
  39. }
  40. </script>
  41. </head>
  43. <body>
  44.     <input type="button" value="获取同域下内容" id="btn" />
  45. </body>
  46. </html>

Ajax实现无刷新上传

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
  8. #div2 {width: 0; height: 30px; background: #CCC;}
  9. #div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
  10. </style>
  11. <script>
  12. window.onload = function() {
  14.     var oBtn = document.getElementById('btn');
  15.     var oMyFile = document.getElementById('myFile');
  16.     var oDiv1 = document.getElementById('div1');
  17.     var oDiv2 = document.getElementById('div2');
  18.     var oDiv3 = document.getElementById('div3');
  20.     oBtn.onclick = function() {
  22.         //alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件
  24.         //oMyFile.files file控件中选择的文件列表对象
  25.         //alert(oMyFile.files);
  27.         //我们是要通过ajax把oMyFile.files[0]数据发送给后端
  29.         /*for (var attr in oMyFile.files[0]) {
  30.             console.log( attr + ' : ' + oMyFile.files[0][attr] );
  31.         }*/
  33.         var xhr = new XMLHttpRequest();
  35.         xhr.onload = function() {
  36.             //alert(1);
  37.             //var d = JSON.parse(this.responseText);
  39.             //alert(d.msg + ' : ' + d.url);
  41.             alert('OK,上传完成');
  42.         }
  44.         //alert(xhr.upload);
  45.         var oUpload = xhr.upload;
  46.         //alert(oUpload);
  47.         oUpload.onprogress  = function(ev) {
  48.             console.log(ev.total + ' : ' + ev.loaded);
  50.             var iScale = ev.loaded / ev.total;
  52.             oDiv2.style.width = 300 * iScale + 'px';
  53.             oDiv3.innerHTML = iScale * 100 + '%';
  55.         }
  57.         xhr.open('post', 'post_file.php', true);
  58.         xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
  60.         var oFormData = new FormData(); //通过FormData来构建提交数据
  61.         oFormData.append('file', oMyFile.files[0]);
  62.         xhr.send(oFormData);
  64.     }
  66. }
  67. </script>
  68. </head>
  70. <body>
  71.     <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
  72.     <div id="div1">
  73.         <div id="div2"></div>
  74.         <div id="div3">0%</div>
  75.     </div>
  77. </body>
  78. </html>

form的上传方式

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. </head>
  8. <body>
  9.     <form method="post" action="post_file.php" enctype="multipart/form-data">
  10.         <input type="file" name="file" />
  11.         <input type="submit" value="上传" />
  12.     </form>
  13. </body>
  14. </html>

websocket

  1. var http = require('http');
  3. var serv = http.createServer(function(req, res) {
  5.     console.log('有人进来了');
  7.     /*res.writeHeader(200, {
  8.         'content-type' : 'text/html;charset="utf-8"'
  9.     });*/
  11.     /*res.writeHeader(404, {
  12.         'content-type' : 'text/html;charset="utf-8"'
  13.     });
  15.     res.write('你要访问的页面资源不存在！');
  16.     res.end();*/
  18.     console.log(req);
  20. }).listen(8888);
  22. console.log('服务器开启成功');
  1. var http = require('http');
  2. var fs = require('fs');
  4. var documentRoot = 'E:/HTML5/websocket/www';
  6. var httpServer = http.createServer(function(req, res) {
  8.     var url = req.url;
  9.     //console.log(url);
  11.     var file = documentRoot + url;
  12.     console.log(file);
  14.     fs.readFile(file, function(err, data) {
  16.         if (err) {
  17.             res.writeHeader(404, {
  18.                 'content-type' : 'text/html;charset="utf-8"'
  19.             });
  20.             res.write('<h1>404</h1><p>你要找的页面被LEO吃了</p>');
  21.             res.end();
  22.         } else {
  23.             res.writeHeader(200, {
  24.                 'content-type' : 'text/html;charset="utf-8"'
  25.             });
  26.             res.write(data);
  27.             res.end();
  28.         }
  30.     });
  32. }).listen(8888);
  1. var http = require('http');
  2. var fs = require('fs');
  3. var io = require('socket.io');
  5. var documentRoot = 'E:/HTML5/websocket/www';
  7. var httpServer = http.createServer(function(req, res) {
  9.     var url = req.url;
  10.     //console.log(url);
  12.     var file = documentRoot + url;
  13.     console.log(file);
  15.     fs.readFile(file, function(err, data) {
  17.         if (err) {
  18.             res.writeHeader(404, {
  19.                 'content-type' : 'text/html;charset="utf-8"'
  20.             });
  21.             res.write('<h1>404</h1><p>你要找的页面被LEO吃了</p>');
  22.             res.end();
  23.         } else {
  24.             res.writeHeader(200, {
  25.                 'content-type' : 'text/html;charset="utf-8"'
  26.             });
  27.             res.write(data);
  28.             res.end();
  29.         }
  31.     });
  33. }).listen(8888);
  35. var socket = io.listen(httpServer);
  37. socket.sockets.on('connection', function(socket) {
  39.     //socket
  41.     //console.log('有人通过socket连接进来了');
  43.     socket.emit('hello', '欢迎');
  45.     /*socket.on('hellotoo', function(data) {
  46.         console.log(data);
  47.     })*/
  50.     //socket.broadcast.emit('a');
  52.     socket.broadcast.emit('a', '有新人进来了');
  54.     socket.on('move', function(data) {
  56.         socket.broadcast.emit('move2', data);
  58.     });
  60. });

HTML5的离线存储（applicationCache）

搭建离线应用程序

manifest文件

  1. CACHE MANIFEST
  3. 2.png
  4. 1.jpg
  6. FALLBACK
  8. style1.css style2.css
  10. NETWORK
  12. a.jpg

Web Workers

Web Worker简单应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Web Worker</title>
  6.     <script type="text/javascript">
  7.         var w1 = new Worker('test.js');
  8.         w1.postMessage('hi');
  9.         w1.onmessage = function(ev){
  10.             alert(ev.data);
  11.         }
  12.     </script>
  13. </head>
  14. <body>
  16. </body>
  17. </html>
  1. //test.js
  3. self.onmessage = function(ev){ //这里的self就是指自己本身，也就是w1这个web worker
  4.     //alert(ev.data); //web worker中的js里面有些命令是不认的，例如alert就不认。
  6.     self.postMessage(ev.data + '妙味课堂');
  7. }

使用Worker提高像素显字的代码性能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>像素显字</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  14.             var aLi = document.getElementsByTagName('li');
  15.             for(var i=0; i<aLi.length; i++){
  16.                 aLi[i].onclick = function(){
  17.                     var str = this.innerHTML;
  18.                     var h = 180;
  19.                     oGC.clearRect(0, 0, oC.width, oC.height);
  20.                     oGC.font = h + 'px impact';
  21.                     oGC.fillStyle = 'red';
  22.                     oGC.textBaseline = 'top';
  23.                     var w = oGC.measureText(str).width;
  24.                     oGC.fillText(str, (oC.width - w) / 2, (oC.height - h) / 2);
  25.                     var oImg = oGC.getImageData((oC.width - w) / 2, (oC.height - h) / 2, w, h);
  26.                     oGC.clearRect(0, 0, oC.width, oC.height);
  28.                     //下面启用的Worker
  29.                     var w1 = new Worker('canvas.js');
  30.                     w1.postMessage(w*h);
  31.                     w1.onmessage = function(ev){
  32.                         var arr = ev.data;
  33.                         var newImg = oGC.createImageData(w, h);
  34.                         for(var i = 0; i<arr.length; i++){
  35.                             newImg.data[arr[i]*4] = oImg.data[4*arr[i]];
  36.                             newImg.data[arr[i]*4+1] = oImg.data[4*arr[i]+1];
  37.                             newImg.data[arr[i]*4+2] = oImg.data[4*arr[i]+2];
  38.                             newImg.data[arr[i]*4+3] = oImg.data[4*arr[i]+3];
  39.                         }
  40.                         oGC.putImageData(newImg, (oC.width - w) / 2, (oC.height - h) / 2);
  41.                     }     
  42.                 }
  43.             }
  44.         }
  45.     </script>
  46. </head>
  47. <body>
  48.     <canvas id="c1" width="400" height="400"></canvas>
  49.     <ul style="float: left">
  50.         <li>秒</li>
  51.         <li>味</li>
  52.         <li>课</li>
  53.         <li>堂</li>
  54.     </ul>
  55. </body>
  56. </html>
  1. //canvas.js
  3. function randomArr(iAll, iNow){ //从iAll个数里面随机取出iNow个数
  4.     var arr = [];
  5.     var newArr = [];
  6.     for(var i=0; i<iAll; i++){
  7.         arr.push(i);
  8.     }
  9.     for(var i=0; i<iNow; i++){
  10.         newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  11.     }
  12.     return newArr;
  13. }
  15. self.onmessage = function(ev){
  16.     var arr = randomArr(ev.data, ev.data/10);
  17.     self.postMessage(arr);
  18. }

HTML5其他功能

内容编辑

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div contenteditable="true" style="height: 200px; width: 200px; background: red;">aaaaaaaaaaa</div>
  9. </body>
  10. </html>

语言输入

桌面提醒

地理信息（Geolocation）

单次定位请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.     // LBS：基于地理信息的应用
  8.     window.onload = function(){
  9.         var oInput = document.getElementById('input1');
  10.         var oT = document.getElementById('t1');
  12.         oInput.onclick = function(){
  14.             navigator.geolocation.getCurrentPosition(function(position){
  16.                 oT.value += '经度:' + position.coords.longitude+'\n';
  17.                 oT.value += '纬度 :' + position.coords.latitude+'\n';
  18.                 oT.value += '准确度 :' + position.coords.accuracy+'\n';
  19.                 oT.value += '海拔 :' + position.coords.altitude+'\n';
  20.                 oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
  21.                 oT.value += '行进方向 :' + position.coords.heading+'\n';
  22.                 oT.value += '地面速度 :' + position.coords.speed+'\n';
  23.                 oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
  26.             }, function(err){
  28.                 //err.code // 失败所对应的编号
  30.                 alert( err.code );
  32.             }, {
  33.                 enableHighAcuracy : true,
  34.                 timeout : 5000,
  35.                 maximumAge : 5000
  36.             });
  38.         };
  40.     }
  41.     </script>
  42. </head>
  43. <body>
  44. <input type="button" value="请求" id="input1"><br>
  45. <textarea id="t1" style="width: 400px; height: 400px; border: 1px solid #000"></textarea>
  46. </body>
  47. </html>

多次定位请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.     // LBS：基于地理信息的应用
  8.     window.onload = function(){
  9.         var oInput = document.getElementById('input1');
  10.         var oT = document.getElementById('t1');
  11.         var timer = null;
  13.         oInput.onclick = function(){
  15.             timer = navigator.geolocation.watchPosition(function(position){
  17.                 oT.value += '经度:' + position.coords.longitude+'\n';
  18.                 oT.value += '纬度 :' + position.coords.latitude+'\n';
  19.                 oT.value += '准确度 :' + position.coords.accuracy+'\n';
  20.                 oT.value += '海拔 :' + position.coords.altitude+'\n';
  21.                 oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
  22.                 oT.value += '行进方向 :' + position.coords.heading+'\n';
  23.                 oT.value += '地面速度 :' + position.coords.speed+'\n';
  24.                 oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
  27.             }, function(err){
  29.                 //err.code // 失败所对应的编号
  30.                 alert( err.code );
  32.                 navigator.geolocation.clearWatch(timer);
  34.             }, {
  35.                 enableHighAcuracy : true,
  36.                 timeout : 5000,
  37.                 maximumAge : 5000,
  38.                 frequency : 1000
  39.             });
  41.         };
  43.     }
  44.     </script>
  45. </head>
  46. <body>
  47. <input type="button" value="请求" id="input1"><br>
  48. <textarea id="t1" style="width: 400px; height: 400px; border: 1px solid #000"></textarea>
  49. </body>
  50. </html>

地图应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>地图应用</title>
  6.     <style>
  7.     #div1{ width:400px; height:400px; border:1px #000 solid;}
  8.     </style>
  9.     <script src="h  ttp://api.map.baidu.com/api?v=1.3"></script>
  10.     <script>
  12.     window.onload = function(){
  13.         var oInput = document.getElementById('input1');
  15.         oInput.onclick = function(){
  17.             navigator.geolocation.getCurrentPosition(function(position){
  19.                 var y = position.coords.longitude;
  20.                 var x = position.coords.latitude;
  22.                 var map = new BMap.Map("div1");
  24.                 var pt = new BMap.Point(y, x);
  26.                 map.centerAndZoom(pt, 14);
  27.                 map.enableScrollWheelZoom();
  28.                 var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));
  29.                 var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
  30.                 map.addOverlay(marker2); 
  32.                 var opts = {
  33.                   width : 200,     // 信息窗口宽度
  34.                   height: 60,     // 信息窗口高度
  35.                   title : "妙味课堂"  // 信息窗口标题
  36.                 }
  37.                 var infoWindow = new BMap.InfoWindow("IT培训机构", opts);  // 创建信息窗口对象
  38.                 map.openInfoWindow(infoWindow,pt); //开启信息窗口     
  39.             });
  40.         };
  41.     };
  42.     </script>
  43. </head>
  45. <body>
  46. <input type="button" value="请求" id="input1" />
  47. <div id="div1"></div>
  48. </body>
  49. </html>

本地存储

Storage API

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>本地存储</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var aInput = document.getElementsByTagName('input');
  10.         aInput[0].onclick = function(){ //设置
  11.             // sessionStorage : 临时性存储
  12.             // localStorage : 永久性存储
  14.             //window.sessionStorage.setItem('name', aInput[3].value);
  15.             window.localStorage.setItem('name', aInput[3].value);
  16.         }
  18.         aInput[1].onclick = function(){ //获取
  19.             //alert(window.sessionStorage.getItem('name'));
  20.             alert(window.localStorage.getItem('name'));
  21.         }
  23.         aInput[2].onclick = function(){ //删除
  24.             //window.localStorage.removeItem('name');
  25.             window.localStorage.clear(); //删除全部数据
  26.         }
  27.     }
  28.     </script>
  29. </head>
  30. <body>
  31. <input type="button" value="设置">
  32. <input type="button" value="获取">
  33. <input type="button" value="删除">
  34. <input type="text">
  35. </body>
  36. </html>

保存注册信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>保存注册信息</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var aInput = document.getElementsByTagName('input');
  10.         var oT = document.getElementById('t1');
  12.         if(window.localStorage.getItem('name')){
  13.             aInput[0].value = window.localStorage.getItem('name');
  14.         }
  16.         if(window.localStorage.getItem('sex')){
  17.            for(var i=1; i<aInput.length; i++){
  18.             if(aInput[i].value == window.localStorage.getItem('sex')){
  19.                 aInput[i].checked = true;
  20.             }
  21.            }
  22.         }
  24.         if(window.localStorage.getItem('ta')){
  25.            oT.value = window.localStorage.getItem('ta');
  26.         }
  28.         window.onunload = function(){
  29.             if(aInput[0].value){
  30.                 window.localStorage.setItem('name', aInput[0].value);
  31.             }
  33.             for(var i=1; i<aInput.length; i++){
  34.                 if(aInput[i].checked == true){
  35.                     window.localStorage.setItem('sex', aInput[i]);
  36.                 }
  37.             }
  39.             if(oT.value){
  40.                 window.localStorage.setItem('ta', oT.value);
  41.             }
  42.         }
  43.     }
  44.     </script>
  45. </head>
  46. <body>
  47. <p>
  48.     用户名：<input type="text">
  49. </p>
  50. <p>
  51.     性别：男 <input type="radio" name="sex">女 <input type="radio" name="sex">
  52. </p>
  53. 内容：<textarea id="t1"></textarea>
  54. </body>
  55. </html>

storage事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>本地存储</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var aInput = document.getElementsByTagName('input');
  10.         aInput[0].onclick = function(){
  11.             window.localStorage.setItem('name', aInput[3].value);
  12.         }
  14.         aInput[1].onclick = function(){ 
  15.             alert(window.localStorage.getItem('name'));
  16.         }
  18.         aInput[2].onclick = function(){
  19.             window.localStorage.removeItem('name');
  20.         }
  22.         window.addEventListener('storage', function(ev){ //当前页面的事件不会触发，其他页面会触发
  23.             alert(123);
  25.             console.log(ev.key);
  26.             console.log(ev.newValue);
  27.             console.log(ev.oldValue);
  28.             console.log(ev.storageArea);
  29.             console.log(ev.url);
  31.         }, false);
  32.     }
  33.     </script>
  34. </head>
  35. <body>
  36. <input type="button" value="设置">
  37. <input type="button" value="获取">
  38. <input type="button" value="删除">
  39. <input type="text">
  40. </body>
  41. </html>

同步购物车

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>同步购物车</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var aInput = document.getElementsByTagName('input');
  11.         for(var i=0; i<aInput.length; i++){
  12.             aInput[i].onclick = function(){
  13.                 if(this.checked){
  14.                     window.localStorage.setItem('sel', this.value);
  15.                 } else {
  16.                     window.localStorage.setItem('unSel', this.value)
  17.                 }
  18.             }
  19.         }
  21.         window.addEventListener('storage', function(ev){
  22.             if(ev.key == 'sel'){
  23.                 for(var i=0; i<aInput.length; i++){
  24.                     if(ev.newValue == aInput[i].value){
  25.                         aInput[i].checked = true;
  26.                     }
  27.                 }
  28.             } else if(ev.key == 'unSel'){
  29.                 for(var i=0; i<aInput.length; i++){
  30.                     if(ev.newValue == aInput[i].value){
  31.                         aInput[i].checked = false;
  32.                     }
  33.                 }
  34.             }
  35.         }, false);
  36.     }
  37.     </script>
  38. </head>
  39. <body>
  40. <input type="checkbox" value="香蕉">香蕉<br>
  41. <input type="checkbox" value="苹果">苹果<br>
  42. <input type="checkbox" value="西瓜">西瓜<br>
  43. <input type="checkbox" value="哈密瓜">哈密瓜<br>
  44. </body>
  45. </html>

行走日记

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. *{ margin:0; padding:0;}
  8. li{ list-style:none;}
  9. #div1,#div2{ float:left; width:400px; height:400px; border:1px #000000 solid; margin:10px; position:relative; overflow:hidden;}
  10. #div2 ul{ position:absolute; left:0; width:2000px;}
  11. #div2 ul .box{ width:400px; height:400px; float:left; overflow:hidden;}
  12. #div2 #childUl{ width:400px;}
  13. #childUl li{ width:400px; border-bottom:1px #666666 dashed;}
  14. #map{ width:100%; height:380px;}
  15. </style>
  16. <script src="move.js"></script>
  17. <script src="http://api.map.baidu.com/api?v=1.3"></script>
  18. <script>
  20. window.onload = function(){
  21.     var oDiv = document.getElementById('div1');
  22.     var aInput = oDiv.getElementsByTagName('input');
  23.     var oT = document.getElementById('t1');
  25.     var iNow = window.localStorage.getItem('num') || 0;
  27.     var oChildUl = document.getElementById('childUl');
  28.     var aChildLi = oChildUl.getElementsByTagName('li');
  30.     var oUl = document.getElementById('ul1');
  31.     var aBox = oUl.getElementsByClassName('box');
  33.     var aBox1_input = aBox[1].getElementsByTagName('input');
  34.     var aBox1_div = aBox[1].getElementsByTagName('div');
  36.     var oBox2_input = aBox[2].getElementsByTagName('input')[0];
  37.     var index = 0;
  39.     if( window.localStorage.getItem('num') ){
  41.         for(var i=0;i<iNow;i++){
  43.             var oLi = document.createElement('li');
  44.             oLi.innerHTML = window.localStorage.getItem('title'+i);
  45.             oChildUl.appendChild( oLi );
  47.         }
  49.         changeLi();
  51.     }
  54.     aInput[1].onclick = function(){  //保存本地
  56.         window.localStorage.setItem('title'+iNow,aInput[0].value);
  57.         window.localStorage.setItem('ta'+iNow,oT.value);
  59.         createLi();
  61.         iNow++;
  63.         window.localStorage.setItem('num',iNow);
  65.     };
  67.     aInput[2].onclick = function(){ //提交后台
  68.     };
  70.     aInput[3].onclick = function(){ //删除所有的数据
  71.         window.localStorage.clear();
  72.     };
  74.     aInput[4].onclick = function(){
  76.         var This = this;
  78.         navigator.geolocation.getCurrentPosition(function(position){
  80.             var y = position.coords.longitude;
  81.             var x = position.coords.latitude;
  84.             if( This.checked ){
  85.                 window.localStorage.setItem('y'+iNow,y);
  86.                 window.localStorage.setItem('x'+iNow,x);
  87.             }
  88.             else{
  89.                 window.localStorage.removeItem('y'+iNow);
  90.                 window.localStorage.removeItem('x'+iNow);
  91.             }
  94.         });
  98.     };
  100.     function createLi(){
  102.         var oLi = document.createElement('li');
  103.         oLi.innerHTML = window.localStorage.getItem('title'+iNow);
  104.         oChildUl.appendChild( oLi );
  106.         changeLi();
  108.     }
  110.     function changeLi(){
  112.         for(var i=0;i<aChildLi.length;i++){
  113.             aChildLi[i].index = i;
  114.             aChildLi[i].onclick = function(){
  116.                 startMove(oUl,{left : -aBox[0].offsetWidth });
  118.                 aBox1_div[0].innerHTML = window.localStorage.getItem('title'+this.index);
  119.                 aBox1_div[1].innerHTML = window.localStorage.getItem('ta'+this.index);
  122.                 if( window.localStorage.getItem('y'+this.index) ){
  123.                     aBox1_input[1].disabled = false;
  125.                 }
  126.                 else{
  127.                     aBox1_input[1].disabled = true;
  128.                 }
  130.                 index = this.index;
  132.             };
  133.         }
  135.     }
  137.     aBox1_input[0].onclick = function(){
  139.         startMove(oUl,{left : 0});
  141.     };
  143.     aBox1_input[1].onclick = function(){
  145.         startMove(oUl,{left : -2*aBox[0].offsetWidth});
  148.         var map = new BMap.Map("map");            
  149.         var y = window.localStorage.getItem('y'+index);
  150.         var x = window.localStorage.getItem('x'+index);
  151.         var title = window.localStorage.getItem('title'+index);
  152.         var text = window.localStorage.getItem('ta'+index);
  153.         var point = new BMap.Point(y, x);    
  154.         map.centerAndZoom(point,15);                    
  155.         map.enableScrollWheelZoom();
  157.         var marker1 = new BMap.Marker(point);
  158.         map.addOverlay(marker1); 
  160.         var opts = {
  161.           width : 250,     // 信息窗口宽度
  162.           height: 100,     // 信息窗口高度
  163.           title : title  // 信息窗口标题
  164.         }
  166.         var infoWindow = new BMap.InfoWindow(text, opts);
  167.         map.openInfoWindow(infoWindow,point);
  170.     };
  172.     oBox2_input.onclick = function(){
  174.         startMove(oUl,{left : -aBox[0].offsetWidth });
  176.     };
  178. };
  180. </script>
  181. </head>
  183. <body>
  184. <div id="div1">
  185. 标题:<input type="text" /><br />
  186. 内容:<textarea id="t1" style="height:300px; width:300px;"></textarea><br />
  187. <input type="button" value="保存本地" />
  188. <input type="button" value="同步服务器" />
  189. <input type="button" value="删除所有数据" />
  190. <input type="checkbox" />记录地图位置
  191. </div>
  192. <div id="div2">
  193.     <ul id="ul1">
  194.         <li class="box">
  195.             <ul id="childUl">
  196.             </ul>
  197.         </li>
  198.         <li class="box">
  199.             <input type="button" value="后退" />
  200.             <input style="float:right" type="button" value="前进" />
  201.             <div></div>
  202.             <div></div>
  203.         </li>
  204.         <li class="box">
  205.             <input type="button" value="后退" />
  206.             <div id="map"></div>
  207.         </li>
  208.     </ul>
  209. </div>
  210. </body>
  211. </html>

音频和视频

音视频的基本操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5音视频</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var oA = document.getElementById('a1');
  10.         var oV = document.getElementById('v1');
  11.         var oInput = document.getElementById('input1');
  12.         var aS = document.getElementsByTagName('source');
  14.         // setInterval(function(){
  15.         //     console.log(oA.currentTime);
  16.         // }, 1000);
  18.         oA.currentTime = 60; //音频从60秒开始播放 currentTime属性既可以读取也可以设置
  19.         console.log(oA.duration);
  20.         console.log(oA.volume);
  21.         console.log(oA.muted); //静音就返回真；否则就返回假
  22.         console.log(oA.paused);
  23.         console.log(oA.ended);
  24.         console.log(oA.error);
  25.         console.log(oA.currentSrc);
  27.         oV.onmouseover = function(){
  28.             this.play();
  29.         }
  30.         oV.onmouseout = function(){
  31.             this.pause();
  32.         }
  34.         oInput.onclick = function(){
  35.             aS[0].src = 'XXXX.mp4';
  36.             aS[1].src = 'XXXX.ogv';
  38.             oV.load();
  39.         }
  41.         oV.poster = 'images/1.png';
  43.         oV.addEventListener('ended', function(){
  44.             alert(123);
  45.         }, false)
  46.     }
  47.     </script>
  48. </head>
  49. <body>
  50. <!-- <audio controls src="johann_sebastian_bach_air.mp3"></audio>
  51. <audio controls src="johann_sebastian_bach_air.ogg"></audio>
  52. <video controls src="Intermission-Walk-in_512kb.mp4"></video>
  53. <video controls src="Intermission-Walk-in.ogv"></video> -->
  55. <!-- <video controls>
  56.     //先找第一个source，如果浏览器不支持第一个，就找下一个
  57.     <source src="Intermission-Walk-in.ogv"></source>
  58.     <source src="Intermission-Walk-in_512kb.mp4"></source>
  59. </video> -->
  61. <audio id="a1" controls autobuffer src="johann_sebastian_bach_air.mp3"></audio>
  63. <input type="button" value="重新加载" id="input1">
  64. <video id="v1">
  65.     //先找第一个source，如果浏览器不支持第一个，就找下一个
  66.     <source src="Intermission-Walk-in.ogv"></source>
  67.     <source src="Intermission-Walk-in_512kb.mp4"></source>
  68. </video>
  69. </body>
  70. </html>

带声音的导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>带声音的导航</title>
  6.     <style>
  7.     * {margin: 0; padding: 0;}
  8.     #ul1 {width: 1000px; height: 30px;}
  9.     #ul1 li {list-style: none; width: 100px; height: 30px; background: red; color: white; border: 1px solid #000; float: left; text-align: center; line-height: 30px;}
  10.     </style>
  11.     <script>
  12.     window.onload = function(){
  13.         var aLi = document.getElementsByTagName('li');
  14.         var oA = document.getElementById('a1');
  16.         for(var i=0; i<aLi.length; i++){
  17.             aLi[i].onmouseover = function(){
  18.                 //this.getAttribute('au')
  19.                 oA.src = 'http://s8.qhimg.com/share/audio/piano1/' + this.getAttribute('au') + '4.mp3';
  20.                 oA.play();
  21.             }
  22.         }
  23.     }
  24.     </script>
  25. </head>
  26. <body>
  27. <ul id="ul1">
  28.     <li au="c">00001</li>
  29.     <li au="d">00002</li>
  30.     <li au="e">00003</li>
  31.     <li au="f">00004</li>
  32.     <li au="g">00005</li>
  33.     <li au="a">00006</li>
  34.     <li au="b">00007</li>
  35. </ul>
  36. <audio id="a1"></audio>
  37. </body>
  38. </html>

视频与canvas结合

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>视频与canvas结合</title>
  6.     <style></style>
  7.     <script>
  8.     window.onload = function(){
  9.         var oV = document.getElementById('v1');
  10.         var oC = document.getElementById('c1');
  11.         var oGC = oC.getContext('2d');
  13.         oC.width = oV.videoWidth;
  14.         oC.height = oV.videoHeight;
  16.         setInterval(function(){
  17.             oGC.drawImage(oV, 0, 0); //drawImage里面也可以添加视频
  18.         }, 30);
  19.     }
  20.     </script>
  21. </head>
  22. <body>
  23. <video controls id="v1">
  24.     <source src="Intermission-Walk-in.ogv"></source>
  25.     <source src="Intermission-Walk-in.mp4"></source>
  26. </video>
  27. <canvas id="c1"></canvas>
  28. </body>
  29. </html>

自制播放器

  1. <!DOCTYPE html>
  2. <head>
  3. <title>无标题文档</title>
  4. <style>
  5. *{ margin:0; padding:0;}
  6. #div1{ width:300px; height:30px; background:#666; overflow:hidden; position:relative;}
  7. #div2{ width:60px; height:30px; background:red; position:absolute; left:0; top:0;}
  9. #div3{ width:300px; height:10px; background:#666; overflow:hidden; position:relative; top:10px;}
  10. #div4{ width:60px; height:10px; background:yellow; position:absolute; left:240px; top:0;}
  12. </style>
  13. <script>
  15. window.onload = function(){
  16.     var oV = document.getElementById('v1');
  17.     var aInput = document.getElementsByTagName('input');    
  18.     var oDiv1 = document.getElementById('div1');
  19.     var oDiv2 = document.getElementById('div2');
  20.     var oDiv3 = document.getElementById('div3');
  21.     var oDiv4 = document.getElementById('div4');    
  22.     var disX = 0;
  23.     var disX2 = 0;  
  24.     var timer = null;
  26.     aInput[0].onclick = function(){     
  27.         if( oV.paused ){        
  28.             oV.play();      
  29.             this.value = '暂停';      
  30.             nowTime();
  31.             timer = setInterval(nowTime,1000);      
  32.         }else{  
  33.             oV.pause();
  34.             this.value = '播放';
  35.             clearInterval(timer);
  36.         }
  37.     };
  40.     aInput[2].value = changeTime(oV.duration);
  41.     aInput[3].onclick = function(){
  42.         if( oV.muted ){
  43.             oV.volume = 1;
  44.             this.value = '静音';
  45.             oV.muted = false;
  46.         }else{
  47.             oV.volume = 0;
  48.             this.value = '取消静音';
  49.             oV.muted = true;
  50.         }
  51.     };
  53.     aInput[4].onclick = function(){ //全屏方法
  54.         if (oV.requestFullscreen) {
  55.           oV.requestFullscreen();
  56.         } else if (oV.msRequestFullscreen) {
  57.           oV.msRequestFullscreen();
  58.         } else if (oV.mozRequestFullScreen) {
  59.           oV.mozRequestFullScreen();
  60.         } else if (oV.webkitRequestFullscreen) {
  61.           oV.webkitRequestFullscreen();
  62.         }
  63.     };
  66.     function nowTime(){
  67.         aInput[1].value = changeTime(oV.currentTime);
  68.         var scale = oV.currentTime/oV.duration;
  69.         oDiv2.style.left = scale * 240 + 'px';
  70.     }
  72.     function changeTime(iNum){
  73.         iNum = parseInt( iNum );
  74.         var iH = toZero(Math.floor(iNum/3600));
  75.         var iM = toZero(Math.floor(iNum%3600/60));
  76.         var iS = toZero(Math.floor(iNum%60));
  77.         return iH + ':' +iM + ':' + iS;
  78.     }
  80.     function toZero(num){
  81.         if(num<=9){
  82.             return '0' + num;
  83.         }
  84.         else{
  85.             return '' + num;
  86.         }
  87.     }
  89.     oDiv2.onmousedown = function(ev){
  90.         var ev = ev || window.event;
  91.         disX = ev.clientX - oDiv2.offsetLeft;
  93.         document.onmousemove = function(ev){
  94.             var ev = ev || window.event;
  95.             var L = ev.clientX - disX;
  97.             if(L<0){
  98.                 L = 0;
  99.             }else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){
  100.                 L = oDiv1.offsetWidth - oDiv2.offsetWidth;
  101.             }
  102.             oDiv2.style.left = L + 'px';
  104.             var scale = L/(oDiv1.offsetWidth - oDiv2.offsetWidth);
  105.             oV.currentTime = scale * oV.duration;
  106.             nowTime();
  108.         };
  109.         document.onmouseup = function(){
  110.             document.onmousemove = null;
  111.         };
  112.         return false;
  113.     };
  116.     oDiv4.onmousedown = function(ev){
  117.         var ev = ev || window.event;
  118.         disX2 = ev.clientX - oDiv4.offsetLeft;
  120.         document.onmousemove = function(ev){
  121.             var ev = ev || window.event;
  122.             var L = ev.clientX - disX2;
  123.             if(L<0){
  124.                 L = 0;
  125.             }else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){
  126.                 L = oDiv3.offsetWidth - oDiv4.offsetWidth;
  127.             }
  128.             oDiv4.style.left = L + 'px';
  130.             var scale = L/(oDiv3.offsetWidth - oDiv4.offsetWidth);
  131.             oV.volume = scale;
  132.         };
  133.         document.onmouseup = function(){
  134.             document.onmousemove = null;
  135.         };
  136.         return false;
  137.     };
  138. };
  140. </script>
  141. </head>
  142. <body>
  143. <video id="v1">
  144.     <source src="Intermission-Walk-in.ogv"></source>
  145.     <source src="Intermission-Walk-in_512kb.mp4"></source>
  146. </video><br />
  147. <input type="button" value="播放" />
  148. <input type="button" value="00:00:00" />
  149. <input type="button" value="00:00:00" />
  150. <input type="button" value="静音" />
  151. <input type="button" value="全屏" />
  152. <div id="div1">
  153.     <div id="div2"></div>
  154. </div>
  155. <div id="div3">
  156.     <div id="div4"></div>
  157. </div>
  158. </body>
  159. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注