html5筆記02

一，Hbulider編輯器安裝使用。
二，html5新增全屏幕效果
this.requestFullScreen();

/*querySelector()方法支持css3中的選擇器*/
 document.querySelector('input[type=button]').οnclick=function () {
    //標準的語法就是
    //ie11以下都不支持
    //由於兼容性問題以及瀏覽器自帶了全屏，實際開發中很少用到全屏方法。
    if (this.requestFullScreen) {
      this.requestFullScreen();
    } else if(this.webkitRequestFullScreen){
      this.webkitRequestFullScreen();
    }else if(this.msRequestFullScreen){
       //ie瀏覽器
    this.msRequestFullScreen();
    }else if( this.mozRequestFullScreen){
     //火狐
    this.mozRequestFullScreen();
  }
}

二，文件讀取：
onchange , readAsDataURL(this.files[0]) , reader.onload

用戶點擊頭像實現實時預覽的效果

 document.querySelector('input[type=file]').οnchange=function () {
    //創建文件讀取對象
    var reader=new FileReader();
    //通過當前的file標籤獲取選擇的文件
    console.log(this.files);//值爲一個數組形式
    //調用該對象的方法讀取文件
    //讀取文件是一個耗時操作不一定什麼時候讀取完畢，可以用onload添加事件
    reader.readAsDataURL(this.files[0]);
    reader.οnlοad=function(){
      // 使用讀取完畢的文件
      console.log(reader.result);
      //使用返回的結果即可,cover縮放到跟屏幕一樣大
      document.querySelector('.iconBox').style.background='url('+reader.result+') no-repeat center/cover';
    }
}

三，文件拖拽佈局：day02

/*定義全局變量保存拖放元素:*/
var moveDom;
  //讓元素能夠被拖拽的內容 丟進去
  document.querySelector('.showBox').οndragοver=function(e) {
 /* 1,先組織showbox的默認行爲:爲函數添加一個事件參數,調用事件參數e.*/
    e.preventDefault();//讓元素能夠拖拽到框框中
    } 
//拖拽元素 丟到容器內 會觸發ondrop事件（如果沒有在ondragover中阻止默認行爲，是不可以拖拽事件觸發的）
  document.querySelector('.showBox').οndrοp=function(e) {
    /*獲取moveDom的src屬性並賦值給盒子*/
    this.style.background='url('+moveDom.src+') no-repeat center/cover'
    moveDom=this;
}
  //開始拖拽元素的時候會觸發ondragstart事件。
  /*獲取所有img標籤綁定拖拽事件*/
 var imgs=document.querySelectorAll('img');
 for(var i=0;i<imgs.length;i++){
    imgs[i].οndragstart=function(){
        moveDom=this;
    }
 }
 }
  /*document.querySelector('img').οndragstart=function(e) {
    moveDom=this;
  }

四，文件拖拽讀取，

/*4，文件拖拽讀取*/
/*觸發ondragover事件*/
 document.querySelector('.rd').οndragοver=function(e){
    e.preventDefault();
 }
/* 阻止ondrop事件默認跳轉行爲*/
 document.querySelector('.rd').οndrοp=function(e){
    /*console.log('123');*/
    e.preventDefault();
    console.log(e.dataTransfer.files[0]);

/* 創建文件讀取對象*/
 var reader= new FileReader();
/* 調用文件讀取對象*/
reader.readAsDataURL(e.dataTransfer.files[0]);
/*文件讀取完畢後獲取結果:*/
reader.οnlοad=function(){
    document.querySelector('.rd').style.background='URL('+reader.result+') no-repeat center/cover'
    }
 }
}

js中文件讀取：

 function jsReadFiles(files) {
         if (files.length) {
             var file = files[0];
             //創建文件讀取對象
            var reader = new FileReader();
             if (/text+/.test(file.type)) {//判斷文件類型是否爲text類型
               reader.onload = function() {
                    $('body').append('<pre>' + this.result + '</pre>');
               }
                reader.readAsText(file);
            } else if(/image+/.test(file.type)) {//判斷是否爲imgage類型
               reader.onload = function() {
                   $('body').append('<img src="' + this.result + '"/>');
                }
                 reader.readAsDataURL(file);
           }
       }
    }

五，web存儲，保存換膚
localStorage保存的值 關閉瀏覽器之後 還是存在的
sessionStorage保存的值關閉瀏覽器之後是不存在的,
但是不能用localStorage做保存私密信息.

/*先獲取三個div*/
var colorDivs=document.querySelectorAll('.container>div');
for (var i=0; i<colorDivs.length;i++) {
    colorDivs[i].οnclick=function(){
        //獲取自身的style 設置給body
        document.body.style.backgroundColor=getComputedStyle(this).backgroundColor;
    }
}
//保存數據，
document.querySelector('input[value=保存]').οnclick=function(){
    //只能保存字符串，這裏保存的是body的背景顏色
    window.localStorage.setItem("myColor",getComputedStyle(document.body).backgroundColor)
    alert("保存成功");
}

//讀取數據，傳入key就可
document.querySelector('input[value=讀取]').οnclick=function(){
    var result=window.localStorage.getItem("myColor");
    document.body.style.backgroundColor=result;
    alert("讀取成功");
}
//刪除數據，指定刪除某一個鍵對應的值
document.querySelector('input[value=清除]').οnclick=function(){
    window.localStorage.removeItem("myColor");
/*  如果我們只想刪除某一個的話,使用removeItem()*/
    /*window.localStorage.clear();//全部清除*/
    alert("清除成功");
}
/*打開瀏覽器,如果保存了顏色,那麼直接加載該顏色*/
window.οnlοad=function(){
    var color=window.localStorage.getItem('myColor');
    if(color=!null){
        document.body.style.backgroundColor=color;

    }else{
        alert("沒有保存顏色哦");
    }
}

6，地圖定位基本語法：
谷歌瀏覽器服務器在國外，定位讀取非常耗時，可以藉助工具和諧上網。
h5的定位只有一個經緯度，如果需要有圖形界面，需要藉助第三方的地圖軟件，調用裏邊的api實現地圖顯示。
定位兩步：1，獲取地理位置信息，2，如何顯示到地圖上邊。
搜索百度地圖api進行輔助顯示地圖樣式
電腦是基於信號基站進行定位的，所以可能定位不是很準確。
（在您的祕鑰裏邊修改祕鑰後使用。）

<script type="text/javascript">
    window.navigator.geolocation.getCurrentPosition(function(position){
        console.log('位置獲取成功');
        console.log(position.coords.longitude);
        console.log(position.coords.latitude);

    // 百度地圖API功能
/*  通過div的id設置爲地圖*/
    var map = new BMap.Map("allmap");
    //設置地圖 標註點的位置
    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
    map.centerAndZoom(point, 15);
    var marker = new BMap.Marker(point);  // 創建標註
    map.addOverlay(marker);               // 將標註添加到地圖中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
    })

7，自定義播放器-佈局頁面

/*先獲取video*/
var videoDom=document.querySelector('video');
    document.querySelector('#play').οnclick=function(){
        if(this.classList.contains('icon-pause')){
            /*暫停播放*/
            videoDom.pause();
            /*移除暫停class*/
            this.classList.remove('icon-pause');
        }else{
            videoDom.play();
            this.classList.add('icon-pause');
        }
    }