H5

時間 2020-08-11

標籤 h5 简体版

原文原文鏈接

html5新特性-表單新特性

(1)新input type <input type=? />javascript

h4:text;password;checkbox;radio;submit;resetphp

h5:number;email;color;date;month;weekcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="#">
       年齡
       <input type="number" name="age" min="5" max="90">
       <br/>
       郵箱
       <input type="email" name="myemail"/>
       <br>
       顏色
       <input type="color" name="mycolor">
       <br>
       年月日
       <input type="data" name="mydate">
       <br>
       年月
       <input type="month" name="mymonth"> 
       <br>
       年星期
       <input type="week" name="myweek">
   </form> 
</body>
</html>

inputtype

inputtype

(2)新elementhtml

h4:input;button;select;textarea;
h5:datalist;progress;meter;output.html5

-datalist建議列表java

<datalist id="list3">
<option value=' xx">xx</option>
</datalist>jquery

<input type="text" list= "Iist3" />web

#默認狀況下datalist不可見
- progress 進度條
<progress></progress> 左右晃動進度條
<progress value="0.5"></progress> 具備指定值進度條ajax

setInterval+progress正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <datalist id="list3">
        <option value="九花山">九花山
        </option>
        <option value="大董">大董
        </option>
        </datalist>
        
    <input type="text" list="list3">
    <hr>
    <progress></progress>
    </progress>
    <progress value="0.1" id="p3"></progress>
<hr>
    <h3>刻度尺</h3>
    每月的薪水
    <meter min="0" max="100000" 
    optimum="99999" value="3000" 
    low="4000" high="90000">
    </meter>
    <br>
    商品單價:￥3.5 <br />
    商品數量:<input type="number"
    name="num"/><br/>
    小計: <output>￥3.5</output>
    
    <script>
        //1:爲進度條添加id
        var p3=document.getElementById("p3");
        //2:獲取進度條
        //3:建立定時器1秒執行一次
        var t=setInterval(function(){        
        //3.1:獲取進度條value
        var v=p3.value;
        //3.2:加0.1
        v+=0.1;
        //3.3:修改value 
        p3.value=v;
        //3.4:若是value大於1中止定時器
        if(v>1){clearInterval(t)}
        },1000);
    </script>
</body>
</html>

datails

details

-meter刻度尺(手機電池)
<meter min="最小值" max="最大值" value="當前"
low="下限" high="上限" optimum="最佳值"></meter>

-output輸出
沒有任何外觀樣式,外觀 span
商品單價:￥3.5
商品數量:<input type="number" value="1" />
小計:<output>￥3.5</output>

(3)新Attr<input ?>

h4:id;class;name;style;checked;readonly;
h5:
autofocus 自動獲取焦點
placeholder 佔位符

form 用於把輸入框放置在表單外部

multiple 容許輸入多值(用逗號分隔)

驗證表單有關

maxlength;minlength;max;min;required;pattern;

-maxlength;minlength 字符串最大長度
-max;min 數字最大值與最小值
- required 不能爲空
-pattern 正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        用戶名
        <input type="text" name="uname" 
        autofocus placeholder="請輸入用戶名" 
        required minlength="3"
        maxlength="12">
        <br>
        電話<input type="text"
        required pattern="1[3-9]\d{9}" name="mytel">
        <input type="submit" value="提交">
    </form>
    郵箱
    <input type="email" 
    multiple name="myemail" form="f5">
</body>
</html>

attr

attr

html5新特性-(video/canvas繪圖)十個特性比

html5新特性-視頻--與音頻--（重點）

基礎知識
(1)視頻文件格式
.mp4 .flv .webm .ogg .. .

(2)解碼器:若是瀏覽器播放指定視頻，
須要安裝特定"解碼器"
x.mp4 ->瀏覽器安裝mp4解碼器
x.flv->瀏覽器沒有安裝flv解碼器結果不能播放
解決:"格式工廠" x.flv->x.mp4->x.webm->x.ogg

標準語法
<video>
<source src="x.flv" />
<source src="x.mp4" />
<source src="x.webm" />
<source src=' 'x.ogg" />
您的瀏覽器版本過低，請升級!!
</video>

簡寫:
<video src="x.mp4"></video>

html5新特性視頻--(重點)-常見方法
-常見屬性
controls 顯示播放控件 <video controls />

-方法:js程序調用
-play(); 播放視頻
-pause(); 暫停播放

-volume: 控制音量(0~1)
-playbackRate: 播放速率大於1快放小於 1慢播

-paused:true當前視頻是否處理暫停狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>播放視頻</h3>
    <!--屏幕寬高度與錄製相關-->
    <video src="res/x.mp4" id="v3"></video>
    <button onclick="vplay()"><img src="res/play.png"></button>
    <button onclick="vpause()"><img src="res/pause.png"></button>
    <button onclick="vplay2()">快放</button>
    <button onclick="vplay3()">慢播</button>
    <button onclick="vplay4()">播放/暫停</button>
    <script>
        function vplay(){
            var v3=document.getElementById("v3");
            v3.play();
        }
        function vpause(){
            var v3=document.getElementById("v3");
            v3.pause();
        }
        function vplay2(){
            var v3=document.getElementById("v3");
            v3.playbackRate=5;
            v3.play();
        }
        function vplay3(){
            var v3=document.getElementById("v3");
            v3.playbackRate=0.3;
            v3.play();
        }
        function vplay4(){
            var v3=document.getElementById("v3");
            if(v3.paused){
                v3.play();
            }else{
                v3.pause();
            }
        }
    </script>
</body>
</html>

video

video

使用video自帶controls控制,自定義控件完成視頻播放和暫停功能

爲視頻綁定鼠標移入移出效果
鼠標移入視頻區顯示圖片按鈕res/play.png
鼠標移出視頻區隱藏圖片按鈕res/pause.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #fff;
            text-align: center;
        }
        /*最外層父元素*/
        .container{
            position:relative;
        }
        #ctrl{
            position: absolute;
            left: 50%;
            top:50%;
            margin-top: -60px;
            margin-left: -60px;
        }
        #ctrl img{
            width: 120px;
            height: 120px;
        }
        #p3{
            position:absolute;
            width: 300px;
            height: 200px;
            left: 50%;
            top:50%;
            margin-left: -150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--視頻 -->
        <video src="res/x.mp4" id="v3"></video>
        <!--2:廣告圖片-->
        <img src="res/p3.png" id="p3"/>
        <!--3:按鈕-->
        <a href="#" id="ctrl">
            <img src="res/play.png"/>
        </a>
    </div>
    <script>
        //1:點擊圖片切換播放和暫停效果
        //2:點擊圖片切換圖片效果
        var ctrl=document.getElementById("ctrl");
        var v3=document.getElementById("v3");
        var img=document.querySelector("#ctrl img");
        var p3=document.getElementById("p3");
        ctrl.onclick=function(e){
            e.preventDefault();
            if(v3.paused){
                img.src="res/pause.png";
                p3.style.display="none";
            v3.play();
            }else{
                img.src="res/play.png";
                p3.style.display="block";
            v3.pause();
            }
        }
        //3:鼠標移入移出
        var container=
        document.querySelector(".container");
        container.onmouseeneter=function(){
            ctrl.style.display="block";
        }
        container.onmouseleave=function(){
            ctrl.style.display="none";
        }
        //4:廣告顯示與隱藏

    </script>
</body>
</html>

鼠標

html5新特性--視頻音頻
-常見屬性
controls 是否顯示播放控件<video controls >

autoplay 是否自動播放<video autoplay>兼容性太差

loop 是否循環播放

muted 是否靜態播放
poster 在播放視頻以前是否顯示廣告圖片
preload 預加載方式(策略)
none:不預加載任何數據
metadata:僅預加載元數據
(視頻時長;視頻第一個畫面;視頻高度寬度)

auto:預加載元數據，還加載必定時長視頻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="res/x.mp4"
    controls loop muted poster="res/p3.png"
    preload="auto" id="v3"></video>
    <script>
        var v3=document.getElementById("v3");
        v3.addEventListener("canplaythrough",function(){
            console.log("視頻加載成功能夠播放");
        });
        v3.addEventListener("ended",function(){
            console.log("播放結束");
        })
        v3.addEventListener("timeupdate",function(){
            console.log(v3.currentTime);
        })
    </script>
</body>
</html>

video

video

html5新特性--視頻高級特性--事件
-canplaythrough 當前視頻加載結束能夠播放事件
duration 獲取視頻時長
-ended 視頻播放結束觸發事件
-timeupdate 視頻正在播放
currentTime 當前播放時間點

html5新特性-視頻高級特性-樣式

video樣式objec-fit
fill: 默認 "填充」將視頻拉伸操做填滿父元素(變形)
contain: "包含"保持原有視頻尺寸，父元素留有空白區域。
conver: '覆蓋"保持原有視頻尺寸,寬度或高度至少有一個與父元素一致(裁切)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 160px;
            height: 160px;
            margin: 10px 0 20px;
            background-color: #b3ccee;
            overflow: hidden;
            border: 1px solid red;
            resize: both;/*規則用戶能夠調整元素大小*/
        }
        .box img{
            width: 100%;
            height: 100%;
            background-color: #cd0000;
        }
    </style>
</head>
<body>
    <h3>默認 fill 拉伸</h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: fill;">
    </div>
    <h3>默認 container 包含 </h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: contain;">
    </div>
    <h3>默認 conver 覆蓋</h3>
    <div class="box">
        <img src="res/mm.png" 
        style="object-fit: cover;">
    </div>
</body>
</html>

video_css

html5新特性-音頻
基礎知識: x.mp3 x.wav....
<audio src="x.mp3" id="a3"></audio>
特性1:默認audio不可見，若是添加controls屬性可見
特性2:屬性方法事件大多數與視頻相同

建立複選框實現控制背景音樂播放練習

當選中複選框播放背景音樂 a3.play()
當清空複選框暫停播放 a3.pause()
cb.change = function(){this.checked==true}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="res/bg.mp3" id="a3"></audio>
    是否播放音樂
    <input type="checkbox" id="c3">
    <script>
        var c3=document.getElementById("c3");
        var a3=document.getElementById("a3");
        c3.onchange=function(){
            if(this.checked){
                a3.play();
            }else{
                a3.pause();
                }
        }
    </script>
</body>
</html>

04_audio

html5新特性--在網頁上繪圖--(重點)

網頁繪製三種技術
(1)svg: 2D矢量圖用線段組成圖形
特色:能夠無限放大或縮小不會失真,顏色不夠豐富

(2)canvas:2D位圖用像素點組成圖形
特色:不能夠放大或縮小，顏色細膩

(3)webgl:3D位圖
還沒有歸入H5標準

html5新特性--在網頁，上繪圖--canvas
(重點-工做流程-座標系-單詞多)

-座標系

-工做流程
(1)經過標籤建立畫布
<canvas id="c3" width="500" height="400"></canvas>
注意事項:畫布寬度和高度只能經過js或者標籤屬性來賦值
可是不能使用css賦值(出現變形)
(2)經過js程序獲取畫布

var c3 = document.getElementByld("c3");

(3)經過畫布元素獲取畫布中指定畫筆對象[上下文對象]
var ctx = c3.getContext("2d");

#2d 平面圖形

-繪製矩形
ctx.strokeRect(x,y,w,h);繪制空心矩形
x,y矩形左上角位置
w,h短形寬度和高度

ctx.strokeStyle = " #fff"; 設置空心邊框樣式

ctx.lineWidth = 1; 設置空心邊框寬度

ctx.fillRect(x,y,w,h); 繪製實心矩形

cx.fillstyle = "#fff"; 設置實心填充樣式

*ctx.clearRect(x,y,w,h); 清除一個矩形範圍內全部元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background: #ddd;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        //1:獲取畫布
        //2:獲取畫筆
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //3:空心矩形
        ctx.strokeStyle="#f00";
        ctx.lineWidth=2;
        ctx.strokeRect(250,200,100,100);
        //左上實心矩形
        ctx.fillStyle="#00f";
        ctx.fillRect(0,0,100,100);
        //清除畫布
        ctx. clearRect(0,0,500,400);
    </script>
</body>
</html>

rect

繪製左右移動空心矩形
06_ rect_ exam.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background-color: #cccccc;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        //左右移動的矩形
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //矩形x初始值位置
        var x=0;
        //建立變量表示移動方向
        //1向右  -1向左
        var xDirection=1;
        //建立定時器
        var t=setInterval(function(){
            //清除畫布
            ctx.clearRect(0,0,500,400)
            //修改移動矩形
            x+=5*xDirection;
            //繪製矩形
            ctx.strokeRect(x,0,100,100);
            //若是矩形移動最右側
            if(x>400){xDirection=-1;//向右
            }else if(x<0){//移動最左側
                xDirection=1;//向右
            }
        },200)
    </script>
</body>
</html>

rect_exam

繪製柱狀銷售統計圖
07_ rect_ exam.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{background-color: #cccccc;}
    </style>
</head>
<body>
    <canvas id="c3" width="500" 
    height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //銷售數據
        var list=[
        {name: "北京" ,sal :290},
        {name:"天津" ,sal:210},
        {name:"石家莊" , sal:190},
        {name: "保定" , sal:210}];
        ctx.fillStyle="#e4393c";
        for(var i=0;i<list.length;i++){
            var w=50;
            var h=list[i].sal;
            var x=i*100+50;
            var y=400-h;
            ctx.fillRect(x,y,w,h);
        }
    </script>
</body>
</html>

07_rect_exam

-繪製文字(字符串)

var str = "石家莊"
ctx.font = "19px SimHei";字體與大小
ct.fillText(str,x,y); 繪製文本

ctx.textBaseline = ""; 指定文本基線
["alphabetic","top","bottom"]

str:繪製文本
x,y:文本左上角位置

html5新特性--canvas-路徑(重點)

做用:路徑做用繪製比較複雜圖形

path:由任意多個點組成圖形，圖形自己不可見可是可使用
"描邊"填充"顯示圖形的效果

ctx.beginPath(); 開始一條新路徑(上一條路徑結束)
ctx.lineTo(x,y); 從當前點到指定點畫一條直線

ctx.moveTo(x,y); 移動到指定點
ctx.stroke(); 描邊

ctx.arc(cx,cy,r,start,end); 圓拱形
cx,cy 圓心
r 半徑
start 開始角度(弧度) 角度*Math.PI/180=弧度
end 結束角度(弧度)

ctx.closePath(); 閉合一條路徑(從結束點到起始點畫一條直線)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>01_path</h1>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //建立路徑
        /*ctx.beginPath();
        ctx.moveTo(250,200);
        ctx.lineTo(500,400);
        ctx.lineTo(300,300);
        ctx.lineTo(250,200);
        ctx.stroke();
         


        //圓形 
        ctx.beginPath();
        ctx.arc(250,200,50,0,180*Math.PI/180);
        ctx.stroke();
        //左上角畫一個半圓
        ctx.beginPath();
        ctx.arc(50,50,50,-90*Math.PI/180,
        90*Math.PI/180) ;
        ctx.stroke( );*/
        //橙色整圓
        ctx. beginPath();
        ctx.arc( 250, 200,100,0,
        2*Math.PI);
        ctx.lineWidth=15;
        ctx.strokeStyle="#fda811";
        ctx.stroke();

    </script>
</body>
</html>

01_path

使用圓環建立動態前進進度條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        canvas{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>01_path進度條</h1>
    <canvas id="c3" width="800" height="800">
    </canvas>
    <script>
       var c3=document.getElementById("c3");
       var ctx=c3.getContext("2d");
       //1 :繪製灰色底框1
       ctx.beginPath();
       ctx.strokeStyle="#fff";
       ctx.lineWidth=25;
       ctx.arc(250,200,100,0,2*Math.PI);
       ctx.stroke();
       //2:建立二個變量保存起始角度與結束角度
       var start=-90;
       var end=-90;
       //3:建立一個變量進度值1%
       var num=0;
       //4:建立定時器繪製進度條
       var t=setInterval(function(){
           ctx.clearRect(0,0,800,800);
        //4.1:修改結束角度
        end+=3.6;
       //4.2:開始新路徑
       ctx.beginPath();
       //4.3:繪製圓環
       ctx.arc(250,200,100,start*Math.PI/180,
       end*Math.PI/180);
       ctx.strokeStyle="#0f0";
       ctx.stroke();
       ctx.font="30px SimHei";
       num++;
       ctx.fillText(num+"%",215,190);
        //中止計時器
        if(num>=100){ 
            clearInterval(t);
        }
       },200);
    </script>
</body>
</html>

02_path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
        text-align:center
    }
    canvas{
        background-color:#ccc;
    }
    </style>
</head>
<body>
    <canvas id="c3"width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:繪製外圍輪廓
        ctx.beginPath();
        ctx.arc(250,200,100,30*Math.PI/180,
        330*Math.PI/180);
        ctx.lineTo(250,200);
        ctx.closePath();
        ctx.stroke();
        //2:藍色眼球
        ctx.beginPath();
        ctx.arc(270,155,25,0,2*Math.PI);
        ctx.fillStyle="#00f";
        ctx.fill();
        ctx.stroke();
        //3:白色眼神
        ctx.beginPath();
        ctx.arc(275,145,5,0,2*Math.PI);
        ctx.fillStyle="#fff"
        ctx.fill();
    </script>
</body>
</html>

03_path

html5新特性--canvas-圖片(重點)

圖片在軟件項目中放在哪裏?服務器指定目錄中
緣由
(1)圖片有版權
(2)圖片數量巨大

-開發流程序
(1)建立圖片對象 var p3 = new Ilmage();
(2)下載指定圖片 p3.src= "x.png"
(3)爲圖片綁定下載完成事件 p3.onload = function(){}
(4)將事件綁定函數中繪製圖片
ctx.drawlmage(p3,x,y); x,y左上角位置(原始大小圖片)
ctx.drawlmage(p3,x,y,w,h); w,h 寬和高(拉伸)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:建立圖片對象
        var p3=new Image();
        //2:下載圖片
        p3.src="res/p3.png";
        //3:綁定下載成功事件
        p3.onload=function(){
          //4:繪製圖片
          ctx.drawImage(p3,0,0);
          ctx.drawImage(p3,250,200,300,150);
            //練習: 上下移動小飛機
            //y表明小飛機座標
            var y=0;
            //表明方向1向下-1向上
            var yDirection = 1;
            var x=0;
            //1向左  -1向右
            var xDirection=1;
            var t = setInterval(function(){
                ctx.clearRect(0,0,500,400);
                //修改y座標
                y+=2*yDirection;
                x+=2*xDirection;
                //繪製圖片
                ctx.drawImage(p3,x,y);
                if(x>300){
                    xDirection=-1;
                }else if(x<1){
                    xDirection=1;
                }
                //若是圖片移動最下方
                if(y>300){
                    //改變方法
                    yDirection=-1;
                }else if(y<1){
                    yDirection=1;
                }
            }, 50);
        }
        

    </script>
</body>
</html>

img

繪製隨鼠標移動而移動小飛機

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //繪製隨鼠標移動而移動小飛機
        //1:建立圖片對象下載圖片
        var p3=new Image();
        p3.src="res/p3.png"
        //2:爲圖片綁定下載成功事件
        p3.onload=function(){
        //2.1:爲畫布綁定鼠標事件
        //mous emove
        c3.onmousemove=function(e){
            ctx.clearRect(0,0,500,400);
        //2.2:獲取鼠標位置Xy
        var mx=e.offsetX;
        var my=e.offsetY;
        //2.3:將鼠標x, y賦值圖片x,y
        ctx.drawImage(p3,mx,my);
        }
        }
    </script>
</body>
</html>

04_img

html5新特性--canvas-變形(重點)

canvas 繪圖技術針對圖像在繪製過程當中進行變形(旋轉)操做

-rotate(弧度)
#旋轉針對畫筆對象,旋轉軸心默認在畫布原點上
#旋轉角度會累加效果

繪製不停旋轉小飛機
定時器+旋轉+繪製小飛機
-translate(x,y);將畫布軸點(原點)移到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        var p3=new Image();
        p3.src="res/p3.png";
        ctx.translate(250,200);
        p3.onload=function(){
            var t=setInterval(function(){
                ctx.clearRect(0,0,500,400);
                ctx.rotate(10*Math.PI/180);
                ctx.drawImage(p3,0-100,0-50);
            },100)
        }
    </script>
</body>
</html>

05_img

-save()
保存狀態
-restore()恢復畫筆狀態

建立二架小飛機,飛機1，飛機2
飛機2旋轉速是是飛機1,2倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:建立圖片對象下載圖片
        var p3=new Image();
        p3.src="res/p3.png";
        //負責保存小飛機1旋轉角度
        var deg1=0;
        //負責保存小飛機2的旋轉角度
        var deg2=0;
        p3.onload=function(){
        //2:綁定下載成功事件
        //2.1:建立定時器
        var t=setInterval(function(){
        //2.2:保存狀態
        ctx.save();
        //2.3:移動軸心
        ctx.translate(100,100);
        //2.4:旋轉10
        deg1+=10; 
        ctx.rotate(deg1*Math.PI/180);
        //2.5:繪製小飛機1
        ctx.drawImage(p3,0-100,0-50);
        //2.6:恢復
        ctx.restore();
            
            //第二架小飛機
            //1:建立變量保存旋轉角度
            //2:保存狀態
            ctx.save();
            //3:累加旋轉角度20
            deg2+=20;
            //4:移動軸心
            ctx.translate(350,100);
            //5:旋轉
            ctx.rotate(deg2*Math.PI/180);
            //6:繪製第二架小飛機
            ctx.drawImage(p3,0-100,0-50);
            //7 :恢復狀態
            ctx.restore();
        },100)
            }
    </script>
</body>
</html>

06_img_exam

手冊:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_ APl

html5新特性--canvas-變形(漸變對象)--瞭解

漸變對象:是一種圖像效果從一種顏色慢慢過渡另外一種顏色
(1)建立漸變對象

var g = ctx.createLinearGradient(x1,y1,x2,y2);
x1,y1起點座標
x2,y2終點座標

(2)添加顏色點

g.addColorStop(offset,color);

(3)將漸變對象賦值填充樣式或者描邊樣式

ctx.fillStyle= g;
ctx.strokeStyle= g;
(4)繪圖
ctx.fillRect(0,0,500,100);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        //1:建立漸變對象
        var g=ctx.createLinearGradient(0,0,500,0);
        //2:添加三個顏色點
        g.addColorStop(0,"#f00");
        g.addColorStop(0.5,"#0f0");
        g.addColorStop(1,"#ff0");
        //3 :將漸變對象賦值填充樣式
        ctx.fillStyle=g;
        ctx.strokeStyle=g;
        //4:將漸變對象賦值空心樣式
        //5:建立實心矩形
        ctx.fillRect(0,0,500,100);
        //6:建立空心文字
        ctx.font="39px SimHei";
        ctx.strokeText("js",250,200);
    </script>
</body>
</html>

08_linear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            background: #ccc;
        }
    </style>
</head>
<body>
    <h1>銷售統計圖</h1>
    <canvas id="c3" width="800" height="600"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        var list=[
            {name:"北京",s:3000},
            {name:"上海",s:3100},
        ]
        var gs=[];
        gs[0]=ctx.createLinearGradient(0,0,0,600);
        gs[0].addColorStop(0,"#f00");
        gs[0].addColorStop(1,"#fff");
        gs[1]=ctx.createLinearGradient(0,0,0,600);
        gs[1].addColorStop(0,"#0f0");
        gs[1].addColorStop(1,"#fff");
        for(var i=0;i<list.length;i++){
            var w=50;
            var h=list[i].s/10;
            var y=600-h;
            var x=i*100+50;
            ctx.fillStyle=gs[i];
            ctx.fillRect(x,y,w,h);
            var txtX=x;
            var txtY=y-20;
            ctx.font="29px SimHei";
            ctx.fillText(list[i].name,txtX,txtY);
        }
        //文字
        //建立2個漸變對象
    </script>
</body>
</html>

統計圖

html5新特性---svg（瞭解）

	canvas	svg
繪製圖像類型	2D位圖	2D矢量圖
如何繪製	使用js代碼繪圖	標籤繪圖
事件綁定	只能將事件綁定畫布	每一個圖形均可以綁定
應用場景	網頁特效；遊戲	地圖

#svg圖形屬性能夠經過css設置-開發流程
(1)建立畫布
<svg id="s3" width="500" height-="400'"...</svg>
(2)向畫布添加元素
<circle cx="" cy="" r="" fill="" stroke="" fllopacity=""
stroke-opacity=""></circle>

svg特性:

1:svg圖形中屬性是能夠經過css設置

2:svg動態建立元素

(1)html字符串拼接

var html = "<circle></circle>";

svg.innerHTML = html;

(2)svg建立對象方法

var c = document.createElementNS("svg標準地址:" ,"標籤");

svg地址:http://www.w3.org/2000/svg

標籤:circle

c.setAttribute("r",100); //不能這樣寫 C.r = 100;

var r = c.getAttribute("r");

svg.appendChild(c);

在畫布上建立30個圓形要求大小，位置，顏色，透明度隨機

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background:#ccc ;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400"></svg>
    <script>
        var s3=document.getElementById("s3");
        //1:建立循環30
        for(var i=0;i<=30;i++){
        //2:建立元素
        var c=document.createElementNS
        ("http://www.w3.org/2000/svg",
        "circle");
        //3:設置半徑?
        var r=Math.random()*20+5;
        c.setAttribute("r",r);
        c.setAttribute("cx",Math.random()*500);
        c.setAttribute("cy",Math.random()*400);
        //4:設置填充?
        var r=Math.random()*255;
        var g=Math.random()*255;
        var b=Math.random()*255;
        var c1=`rgb(${r},${g},${b})`;
        c.setAttribute("fill",c1);
        //5:設置透明度?
        c.setAttribute("fill-opacity",
        Math.random());
        //6:將元素追加畫布
        s3.appendChild(c);
        }
    </script>
</body>
</html>

03_svg

當點擊某個圓時它會慢慢變大變淡最後消失,最後刪除此元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background:#ccc ;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400"></svg>
    <script>
        var s3=document.getElementById("s3");
        //1:建立循環30
        for(var i=0;i<=30;i++){
        //2:建立元素
        var c=document.createElementNS
        ("http://www.w3.org/2000/svg",
        "circle");
        //3:設置半徑?
        var r=Math.random()*20+5;
        c.setAttribute("r",r);
        c.setAttribute("cx",Math.random()*500);
        c.setAttribute("cy",Math.random()*400);
        //4:設置填充?
        var r=Math.random()*255;
        var g=Math.random()*255;
        var b=Math.random()*255;
        var c1=`rgb(${r},${g},${b})`;
        c.setAttribute("fill",c1);
        //5:設置透明度?
        c.setAttribute("fill-opacity",
        Math.random());
        //6:將元素追加畫布
        s3.appendChild(c);
        //7:爲元素綁定點擊事件
        c.onclick=function(){
            //防止當前元素再次被點擊當前元只能點擊一次
            this.onclick=null;
            var t=setInterval(()=>{
                //7.1:元素半徑增長
                var r=this.getAttribute("r");
                r*=1.05;
                this.setAttribute("r",r);
                //7.2:元素透明度減小
                var p=this.getAttribute("fill-opacity");
                p*=0.9;
                this.setAttribute("fill-opacity",p)
                //7.3:刪除
                if(p<0.05){
                    clearInterval(t);
                    s3.removeChild(this);
                }
            },50)
        }
        }
    </script>
</body>
</html>

03_svg

html5新特性--svg--直線

<line x1 y1 x2 y2 stroke=" stroke-width=" stroke-linecap="*></line>
stroke 描邊樣式
stroke-width 線寬度
stroke-linecap 邊線頂端樣式 round
漢堡包圖標/五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
   <svg id="s3" width="500" height="400">
     <g stroke-width="5" 
     stroke-linecap="round"
     stroke="#000">
     <!--group 小組-->
     <line x1="250" y1="200" 
        x2="251" y2="200">
    </line>
    <line x1="259" y1="200" 
    x2="280" y2="200"></line>

    <line x1="250" y1="210" 
    x2="251" y2="210">
    </line>
    <line x1="259" y1="210" 
    x2="280" y2="210"></line>

    <line x1="250" y1="220" 
    x2="251" y2="220">
    </line>
    <line x1="259" y1="220" 
    x2="280" y2="220"></line>
    </g>
    <!--五角星-->
    <line x1="100" y1="100" 
    x2="150" y2="100" stroke="#000"></line>
    <line x1="150" y1="100" 
    x2="105" y2="150" stroke="#000"></line>
    <line x1="105" y1="150" 
    x2="125" y2="70" stroke="#000"></line>
    <line x1="125" y1="70" 
    x2="135" y2="150" stroke="#000"></line>
    <line x1="135" y1="150" 
    x2="100" y2="100" stroke="#000"></line>
    </svg>
</body>
</html>

04_svg

html5新特性--SVg--折線

一條折線上能夠有任意多個連續點(x,y)
<polyline points="x,y X,Y x,y ..." stroke=""></polyline>

3.4:html5新特性--svg--文本/圖像
<text font-size="" fll="" stroke=" x="" y="">文本內容</text>

單獨的標籤 <span></span>不行
<image xlink:href="x.jpg" x="" y=""></image>

x:y元素左上角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
           text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400">
    <polyline 
    points="50,50 100,50 100,100 50,50"
    stroke="#f00" fill-opacity="0"></polyline>
    <text font-size="19" fill="blue" 
    x="250" y="200">卡西歐</text>
    
    <image xlink:href="res/p5.png" 
    x="0" y="0"></image>
</svg>
</body>
</html>

05_svg

html5新特性-Vg--漸變對象--(一種特效)

<defs>定義特效對象
<linearGradient id="g3" x1=""y1=" x2="y2=">
<stop offset="偏移量" stop-color="" />

...
</linearGradient>
</defs>

#x1 y1
起點座標 0% 100%
#x2 y2 終點座標
#offset顏色點位置30%

<ANY fill="url(#g3)" stroke="url(#g3)"></ANY>
#ANY任意標籤line;text;cirele;....

3.6:html5新特性--svg-濾鏡--(一種特效)高斯模糊濾鏡

<defs>
<filter id="f3">
<feGaussianBlur stdDeviation="數字" />
</filter>
</defs>
#數字:模糊度級別0~10 7看不清
<ANY filter="url(#g3)"></ANY>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <svg id="s3" width="500" height="400">
        <defs>
            <!--建立漸變對象-->
            <linearGradient id="g3"
            x1="0%" y1="0%" x2="100%"
            y2="0%">
        <stop offset="0%"
        stop-color="red"></stop>
        <stop offset="100%"
        stop-color="#ff0"></stop>
    </linearGradient>
            <!--建立濾鏡-->
            <filter id="f3">
                <feGaussianBlur stdDeviation="5">
                </feGaussianBlur>
            </filter>
        </defs>
        <text font-size="30" 
        x="20" y="100" fill="url(#g3)">javascript</text>
        <text font-size="30" 
        x="20" y="200" filter="url(#f3)">javascript</text>
    </svg>
</body>
</html>

06_svg

html5新特性- echarts-百度第三方繪圖庫--(重點)

-d3.js 國外公司

-echarts 百度https://www.echartsjs.com

#爲何要使用第三方繪圖庫
-繪圖庫提供很是複雜圖形
-下降繪圖難度

html5新特性--echarts-百度第三方繪圖庫--(重點)

(1)下載echarts庫文件

https://www.echartsjs.com/ download.html

(2)建立容器

(3)將echarts庫引入網頁中

(4)獲取容器而且建立echarts對象 js

var main = document.getElementByld(" main");
var mychart = echarts.init(main);

(5)建立配置項

var option={

title:{text:"echarts 入門示例" } #頂部標題

xAixs:{data:["襯衫","襪子","褲子", "雪紡衫"]}， #x軸數據

yAixs:{}， #y軸數據

series:[{type:"bar",data:[10,10,11,13]}] #數據源

}

type:"bar"指繪圖像的類型 bar line pie....

(6)將配置項添加echarts 對象便可

mychart.setOption(option)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="資源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="width:500px;height:400px"></div>
    <script>
        //獲取容器
        var main=document.getElementById("main");
        //建立mychart對象
        var mychart=echarts.init(main); 
        //建立配置項目
        var option={
            title:{text:"示例一"},
            xAxis:{data:["襯衫","襪子","褲子","雪紡衫"]},
            yAxis:{},
            series:[{type:"bar",data:[10,10,11,13]}] 
            }
        //將配置添加mychart
        mychart.setOption(option);
    </script>
    
</body>
</html>

echart

示例：銷售統計

{name:"冰箱",val:190},
{name:"電視" ,val:19},
{name:"洗衣機" ,val:390},
{name:"空調",val:90},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="資源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="height:600px;width:800px;"></div>
    <div id="box" 
    style="height:400px;width:500px;
    border: 1px solid red;"></div>
    <script>
        //*0:銷售數據
        var list=[
        {name:"冰箱",val:190},
        {name:"電視",val:19},
        {name:"洗衣機",val:390},
        {name:"空調",val:90},
        ];
        //x軸數據
        var names=[];
        //數據源數據
        var vals=[];
        for(var item of list){
            names.push(item.name);
            vals.push(item.val);
        }
        //*1:獲取容器而且建立echarts對象
        var main=
        document.getElementById("main");
        var mychart=echarts.init(main);
        //2:建立option
        var option={
            title:{text:"銷售統計圖"},
            xAxis:{data:names},
            yAxis:{},
            series:[{type:"bar",data:vals}]
        };
        //3 :將option添加echarts
        mychart.setOption(option);
        //echarts 折線圖
        //1:獲取容器而且建立對象
        var box=document.getElementById("box");
        var boxchart=echarts.init(box);
        //2:建立配置項
        var boxoption={
            title:{text:"折線圖"},
            xAxis:{data:names},
            yAxis:{},
            series:[{type:"line",data:vals,smooth:true}]
        }
        //3:將配置項添加
        boxchart.setOption(boxoption);
    </script>
</body>
</html>

08_echart

html5新特性--echarts-餅狀圖

{type:"pie",radius:"半徑",center:["x","y"],data:{value:12,name:"a"}]}

html5新特性--echarts-儀表圖

var option={
series:[{type:"gauge" ,
detail:{formatter:"{value}%"}, //顯示進度{32}%
data:[{value:32,name:"完成率"}]}]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="資源/echarts.min.js"></script>
</head>
<body>
    <div id="main" 
    style="width:500px; height:400px;"></div>
    <div id="box" style="width: 500px; height: 400px;border:1px solid blue"></div>
    <script>
        //1:獲取容器而且建立對象
        var main=document.getElementById("main");
        var mychart=echarts.init(main);
        //2:建立option
        var option={
            title:{text:"餅狀統計圖"},
            series:[
                {type:"pie",
                radius:"50%",
                center:["50%","50%"],
                //元素樣式
                itemStyle:{
                    normal:{
                        color:"#c23531",
                        shadowBlur:200,//陰影
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                },
                data:[{value:100,name:"js"},
                {value:99,name:"php"},
                {value:101,name:"java"}]
                }]
            }
        //3 :將option添加對象
        mychart.setOption(option);

        var box=document.getElementById("box");
        var boxchart=echarts.init(box);
        var boxoption={
            series:[{
                name:"業務指標",
                type:"gauge",
                detail:{formatter:"{value}%"},
                data:[{value:35,name:"完成率"}]
            }]
        };
        boxchart.setOption(boxoption);
    </script>
    
</body>
</html>

gauge

html5新特性-拖放API

在網頁實現拖放效果 Drag&Drop 拖動和釋放

-拖動源對象(會動)-觸發三個事件
dragstart 拖動開始
drag 拖動中
dragend 拖動結束
整個過程:dragstart* 1+drag* n+dragend*1
-拖動目標對象(不會動)-觸發四個事件
dragenter 拖動進入
dragover 拖動懸停
dragleave 拖動離開
drop 釋放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="res/trash.png" id="p3">
    <hr>
    <img src="res/p3.png" id="p3">
    <script>
        //分析拖動源對象三個事件操做
        var p3=document.getElementById("p3");
        //1:拖動開始
        p3.ondragstart=function(){}
        //2:拖動中
        p3.ondrag=function(){}
        //3:拖動結束
        p3.ondragend=function(){}
        var trash=document.getElementById("trash");
        trash.ondragenter=function(){}
        trash.ondragover=function(e){
            //有默認行爲沒法執行ondrop，因此阻止默認行爲
            e.preventDefault();
        }
        trash.ondragleave=function(){}
        trash.ondrop=function(){}
    </script>
</body>
</html>

02_drop

使用拖動提供7個事件實現拖動刪除效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="res/trash.png"id="trash">
    <hr>
    <div class="container">
        <img src="res/p3.png" id="p3">
        <img src="res/p4.png" id="p4">
        <img src="res/p5.png" id="p5">
    </div>
    <script>
        //1:獲取全部元素
        var trash=document.getElementById("trash");
        var list=document.querySelectorAll
        (".container img");
        //2:建立全局變量pid
        var pid=-1;
        //3:爲源對象綁定拖動開始事件
        for(var item of list){
            item.ondragstart=function(){
                pid=this.id;
            }
            item.ondrag=function(){}
            item.ondragend=function(){}
        }
        //4:將當前小飛機id保存pid中
        trash.ondragover=function(e){
            e.preventDefault();
        }
        //5:any回收站綁定釋放事件
        trash.ondrop=function(){
        //6:依據pid獲取小飛機而且刪除(pid是變量，因此沒加雙引號)
        var p=document.getElementById(pid);
        p.remove();
        }
    </script>
</body>
</html>

02_drop_exam

html5新特性-Web Worker（瞭解）

-原理多 3行代碼

程序:指能夠被CPU執行代碼，代碼一般存儲在磁盤上
1.html 1.css 1.js

進程:將程序(代碼)調入內存中執行(在內存中代碼稱爲進程)
線程:線程是進程內部組件部分

chrome瀏覽器線程模型
一個chrome進程內部至少7個線程:
-其中有一個線程負責全部資源繪製而且負責執行js(UI主線程)
-至少有6個線程負責向服務器發送請求獲取資源(請求線程)

<button>按鈕一-</button>
<script src="1.js"></script>
<button>按鈕二</button>
問題:若是1.js執行時間很是長，網頁出現中止現象(空白)

解決方案:建立一個新線程(Worker)讓它執行耗時jis 任務，
UI主線只負責繪製二個按鈕

<button>按鈕一</button>
<script>
new Worker("res/03.js");
#建立Worker對象
#建立新線程Worker執行03.js
</script>
<button>按鈕二</button>

#注意事項:瀏覽器不容許Worker線程執行js程序中出現
任何DOM/BOM內容
#緣由:瀏覽器開發者認爲多個線程同時繪製網頁容易出現
混亂現象..

總結:WebWorker新線程用於執行耗時js任務,提升網頁效率
js任務不能有DOM/BOM若是jquery.js不行

2.5:html5新特性-數據傳遞
Worker(03.js)傳遞數據 Ul(html) 線程
-Worker(03.js)發送
postMessage(strmsg); //發送執行完畢幾個字
-Ul(html) 接收
var w = new Worker("res/03.js");
w.onmessage = function(e){e.data}//執行完畢

Ul(html)傳遞數據Worker(03.js) 線程
-Ul(html) 發送
w. postMessage(stringMsg)
-Worker 接收
onmessage = function(e){e.data}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按鈕一</button>
    <!--03.js 5秒
    <script src="03.js"></script>-->
    <script>
        //建立worker線程
        var w=new Worker("res/03.js");
        w.onmessage=function(e){
            var m=e.data;
            var msg=document.getElementById("msg");
            msg.innerHTML=m;
        }
        w.postMessage(7000);
    </script>
    <button>按鈕二</button>
    <div id="msg"></div>
</body>
</html>

worker

//接受ui線程傳遞的數據
onmessage=function(e){
    var end=parseInt(e.data);
    //1:建立開始時間
var start=new Date().getTime();
//2:建立循環，建立結束時間
do{
//3:判斷條件:若是結束時間-開始時間
var end1=new Date().getTime();
//<5000繼續循環
}while(end1-start<end);
postMessage("執行完畢");
}
//小技巧：讓程序執行5秒鐘

03.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input placeholder="請輸入數值" id="num1">
    <br>
    <button id="btn">計算</button>
    <hr>
    結果
    <div id="msg"></div>
    <script>
        //1:獲取按鈕而且綁定事件
        var btn=document.getElementById("btn");
        btn.onclick=function(){
        //2:獲取用戶輸入數據
        var num1=document.getElementById("num1");
        var n=num1.value;
        //3:建立Worker線程完成累加計算
        var w=new Worker("04.js");
        //4:將用戶輸入數據發送Worker
        w.postMessage(n);
        w.onmessage=function(e){
            var rs=e.data;
            var msg=document.getElementById("msg");
            msg.innerHTML=rs;
        }
        //5:接收Worker計算結果而且顯示
        }
    </script>
</body>
</html>

04.html

//1:接收UI傳遞數值
onmessage=function(e){
//2:計算累加和
var n=e.data;
//累加和
var sum=0;
for(var i=1;i<=n;i++){
    sum+=i;
}
//3:將結果發送04.html
postMessage(sum);
    }

04.js

html5新特性-Web Storage

在客戶端瀏覽器中存儲用戶專用數據
示例:用戶暱稱;購物車

-客戶端存儲數據種類

(1)cookie	適用範圍廣	操做複雜	2KB
(2)webStorage	新	操做簡單	8MB
(3)flash	依賴flash播放器	使用較少
(4)indexDB	新	操做簡單	沒上限

-webStorage兩個對象
(1)sessionStorage 當前會話中多個網頁能夠共享數據

setltem(key,value); 保存數據 key鍵 value值

var value = getltem(key); 獲取數據value
removeltem(key); 刪除一組數據
clear(); 清空全部數據
var key = key(i); 獲取key
length 數據個數

(2)localStorage 保存數據永久

setltem(key,value); 保存數據 key鍵 value值

var value = getltem(key); 獲取數據value
removeltem(key); 刪除一組數據
clear(); 清空全部數據
var key = key(i); 獲取key
length 數據個數

#客戶端保存數據要求:安全性差能夠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>05.html--存儲</h3>
    <a href="06.html">獲取</a>
    <script>
        sessionStorage.setItem("name","紅");
        sessionStorage.setItem("age",23);
        localStorage.setItem("name1","綠");
        localStorage.setItem("age1",12);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>06.html</h3>
    <script>
        var n=sessionStorage.getItem("name");
        var age=sessionStorage.getItem("age");
        console.log(n+":"+age);
        console.log(sessionStorage.length);
        console.log(sessionStorage.key(0));
        //sessionStorage.removeItem("age");
        console.log(localStorage.setItem("name1"));
        console.log(localStorage.getItem("age"));
    </script>
</body>
</html>

示例：模擬登陸與退出

index.html建立首頁而且在右上角添加超連接"請登陸"
當用點擊連接時跳轉login.html
login.html建立表單請用戶填寫用戶名和密碼
點擊提交:提示3s 秒後跳轉首頁
setTimeout+location.href

sessionStorage.setltem("uname","tom");
index.html右上角"歡迎回來:tom 退出"

logout.html提示:您己退出3s後跳轉index.html
index. htm|首頁右上"請登陸"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #msg{
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="msg">
        <a href="login.html">請登陸</a>
    </div>
    <script>
        var n=sessionStorage.getItem("uname");
        if(n){
            var str=`歡迎回來${n}`;
            str+=`<a href="logout.html">退出</a>`;
            var msg=document.getElementById("msg");
            msg.innerHTML=str;
        }
    </script>
</body>
</html>

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        用戶名：
        <input type="text" id="uname">
        <br>
        密碼：
        <input type="password" id="upwd">
        <br>
        <input type="button" value="登陸" 
        id="btn">
    </form>
    <script>
        //1:獲取按鈕而且綁定點擊事件
        var btn=document.getElementById("btn");
        btn.onclick=function(){
        //2:獲取用戶保存在:sessionStorage
        var uname=document.getElementById("uname");
        //保存用戶名
        sessionStorage.setItem("uname",uname.value);
        //3 :跳轉index. html
        alert("3秒後跳轉首頁");
        setTimeout(function(){
            location.href="index.html"
        },3000);
            }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //清除登陸條件
        sessionStorage.removeItem("uname");
        alert("您己退出 3s後跳轉首頁");
        setTimeout(function(){
            location.href="index.html"
        },3000);
    </script>
</body>
</html>

logout

示例：
(1)建立銷售數據表
t_ sal[id:1,m:1,sal:10.0...] 12行
(2)建立服務器程序app.js
接收get("/sal")將數據庫銷售表數據返回
(3)homework. html
1:發送ajax請求原生ajax

2:依據返回數據建立銷售統計圖echarts 柱狀態

html5 webSocket協議--原理(代碼4行)

(1)http 協議
http協議:超文本傳輸協議
http協議:傳輸網頁資源(htm/css/img/avi/m3/...)
網頁內容搬運工

http://127.0.0.1:3000/index.html
http協議工做方式:請求和響應
#必須是客戶端發起請求服務器端纔會有響應數據
#並且一次請求只能獲取一次響應數據
問題:有一些應用場景下此協議不適合

金融股票行業:[股票走勢圖]多長時間發送一次請求
?5分鐘
? 10ms
解決問題:webSocket協議
webSocket協議工做方式:廣播和收聽

客戶端鏈接到服務器上就再也不斷開雙方均可以隨時向對方發送數據

webSocket適用場景:股票走勢圖/羣聊

html5 webSocket服務器提供現成

html5 webSocket客戶端 4行代碼

-建立webSocket對象
var c = new WebSocket("ws://127.0.0.1:9001");
WS 協議名稱
127.0.0.1服務器在本地電腦上
9001 服務器默認工做端口

_接收服務器發送數據.
c.onmessage = function(e){e.data}
-發送數據給服務器
c.send(stringMsg);
-關閉連續

c.close();

3.4:html5遊戲(大魚和小魚)--重點-功能分析
-藍色大海
-紫色海葵左右擺動
-海葵頭頂位置出生食物
-食物藍色(多)100橙色(少) 200
-大魚負責吃食物
-小魚跟着大魚
-大魚負責喂小魚

3.5:html5遊戲(大魚和小魚)--重點-目錄
game--遊戲目錄
src--全部遊戲中使用圖片
js--全部js文件

index.html--惟一個網頁

3.5:html5遊戲(大魚和小魚)--功能一:背景 index.html

-建立畫布標籤
畫布一:(前)大魚小魚分數 z-index:1
畫布二:(後)背景海葵食物 z-index:0
-爲畫布設置樣式

-遊戲程序設計:-一個角色一個文件
-建立js game/js/background.js
-建立drawBackground() 繪製背景圖片

-main.js

做用：建立遊戲全部全局變量

建立全部遊戲中角色對象
繪製遊戲角色

-requestAnimationFrame(gameloop);
之前定時器不適合建立動畫效果智能定時器
定時器不停計算當前瀏覽器效率，得出最佳間隔時間
setInterval(fn,200); 固定時間 200ms 20ms.
固定時間 300ms 200ms

3.6:html5遊戲(大魚和小魚)功能二:海葵版本- -(靜態)
-建立文件ane.js
實現海葵依靠直線路徑lineTo()
-一共50根海葵

-海葵間距16 800/50

-海葵高度200 50 隨機

2.3:html5遊戲(大魚和小魚)功能二:海葵版本二(動態)

功能分析:擺動海葵
解決方案:使用曲線替換直線完成海葵繪製
貝賽爾曲線:

p0:起點座標
p2:終點座標
p1:控制點
曲線:從p0開始通過p1控制點最後繪製p2終點這樣一條曲線貝賽爾曲線

初始化:起點座標控制點座標終點座標一致.
擺動:終點發生變化 -20 +20

moveTo(起點座標x,起點座標y)
quadraticCurveTo(控制點x,控制點y,終點x,終點y);

右向100+1 +2 +3 +4 +5..+20
左向100-1-2-3-4-5 ..-20
解決方案:正弦函數返回值-1~1
var p = Math.sin(很是小小數0.00032); p(-1~1)

2.4:html5遊戲(大魚和小魚)功能二:食物第一個版本
(1)30個食物其中藍色居多橙色不多fruit.png blue.png
(2)同一個時刻15個食物顯示15個隱藏
(3)食物行爲:

出生:在海葵終點座標位置出生
寬度+高度: 0~14
向上漂浮:y- spd

(4)食物漂浮出屏幕隱藏
(5)食物被大魚吃了隱藏

2.5:html5遊戲(大魚和小魚)功能三:大魚
(1)畫布
can1:大魚/分數/...
can2:背景/海葵/食物
(2)大魚多張圖片組件

眼睛:bigEye0.png .. bigEye1.png 二張眼睛圖片
身體:bigSwim0.png .. bigSwim7.png 八張身體圖片
尾巴:bigTail0.png ... bigTail7.png 八張尾巴圖片

(3)大魚行爲
大魚吃食物
大魚跟鼠標遊動
大魚吃食物得分藍色食物100 橙色200分

2.1:大魚/大魚吃食物/分數
2.2:大魚吃食物
若是大魚位置與食物位置很是接近表示大魚吃到食物
若是食物消失
問題:大魚與食物距離

collsion.js完成大魚與食物[碰撞檢測]

2.3:分數
分數字符串咱們將分數畫在畫布底端
1:吃藍色食物100分
2:吃橙色食物200分

食物類型fruitType "blue",," orange"

3.:html5地理定位(小程序定位服務器騰訊地圖)

示例：拖放上傳圖片功能-針對PC端須要的功能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。