<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          事件冒泡和冒泡的阻止
          
            
          
               seo達人                                            
          
            
          事件冒泡概念：當元素觸發了事件的時候，會依次向上觸發所有元素的相同事件。

          


          
事件冒泡的行為演示

          
<!DOCTYPE html>

          
<html lang="en">

          
<head>

          
    <meta charset="UTF-8">

          
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

          
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

          
    <title>Document</title>

          
    <style>

          
     #a{

          
         background: pink;

          
         width: 400px;

          
         height: 400px;

          
     }

          
     #b{

          
         background: green;

          
         width: 300px;

          
         height: 300px;

          
     }

          
     #c{

          
         background: red;

          
         width: 200px;

          
         height: 200px;

          
     }

          
    </style>

          
</head>

          
<body>

          
    <div id="a">

          
        我是a

          
          <div id="b">

          
                我是b

          
             <div id="c">我是c</div>

          
          </div>

          
    </div>

          
    <script>

          
     var a = document.querySelector('#a')

          
     var b = document.querySelector('#b')

          
     var c = document.querySelector('#c')

          


          
     a.onclick = fn1;

          
     b.onclick = fn2;

          
     c.onclick = fn3;

          


          
     function fn1(){

          
         alert('a來了')

          
     }

          


          
     function fn2(){

          
         alert('b來了')

          
     }

          
     

          
     function fn3(){

          
         alert('c來了')

          
     }

          
    </script>

          
</body>

          
</html>

          


          
上面這段代碼一共有三個事件,三個div都分別綁定了單擊事件。在頁面中當單擊c會連續彈出3個提示框。這就是事件冒泡引起的現象。事件冒 泡的過程是：c --> b --> a 。c冒泡到b冒泡到a。

          


          
冒泡的阻止

          
方法：

          
1.event.stopPropagation(); 是事件對象Event的一個方法，作用是阻止目標元素事件冒泡到父級元素 2.event.cancelBubble = true; IE瀏覽器的方法

          


          
<!DOCTYPE html>

          
<html lang="en">

          
<head>

          
    <meta charset="UTF-8">

          
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

          
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

          
    <title>Document</title>

          
    <style>

          
     #a{

          
         background: pink;

          
         width: 400px;

          
         height: 400px;

          
     }

          
     #b{

          
         background: green;

          
         width: 300px;

          
         height: 300px;

          
     }

          


          
      #c{

          
         background: red;

          
         width: 200px;

          
         height: 200px;

          
     }

          
    </style>

          
</head>

          
<body>

          
    <div id="a">

          
        我是a

          
          <div id="b">

          
                我是b

          
             <div id="c">我是c</div>

          
          </div>

          
    </div>

          
    <script>

          
     var a = document.querySelector('#a')

          
     var b = document.querySelector('#b')

          
     var c = document.querySelector('#c')

          


          
     a.onclick = fn;

          
     b.onclick = fn;

          
     c.onclick = fn;

          


          
     function fn(event){

          
         var e = window.event || event;

          
         // 事件冒泡的阻止

          
         if(e.stopPropagation){

          
            e.stopPropagation();  // 通用寫法

          
         }else{

          
             e.cancelBubble = true; // 阻止IE

          
         }

          
         var str = this.innerHTML;

          
         alert(str)

          
     }

          
    </script>

          
</body>

          
</html>

          

          
            
          
              
                評論(0)
                瀏覽(2609)
              
                          
          
          
          
                      
          
            
            
          Layui中使用ECharts
          
            
          
               seo達人                                            
          
            
          日?！边^坑“記錄

          
只記錄方法不說原理。。。

          


          
步驟：

          


          
ECharts下載

          
引入echarts.js

          
注意：這里好像只能用echarts.js,其它的不行，英文后面配置的時候要改東西(ps:我也不太不清楚)

          


          


          


          
修改echarts.js

          
打開echarts.js，在文件大概開始處添加如下代碼

          


          
window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :

          
如圖：

          


          


          


          
在文件內容末尾添加如下代碼：

          


          
exports.parseGeoJson = parseGeoJson;

          
return exports;

          
如圖：

          


          


          


          
 

          


          
layui添加配置并使用

          


          


          
ok了，和網上其它的相比，我這個應該是最簡單的配置了。

          

          
            
          
              
                評論(0)
                瀏覽(9665)
              
                          
          
          
          
                      
          
            
            
          h5新增的表單標簽
          
            
          
               seo達人                                            
          
            
          h5新增的表單標簽

          
原創weixin_46366721 最后發布于2020-02-29 12:27:39 閱讀數 13  收藏

          
展開

          
<!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>

          
       / 谷歌 /

          
       input::-webkit-input-placeholder{

          
           color:blue;

          
       }

          
       / 火狐19+ /

          
       input::-moz--input-placeholder{

          
           color:blue

          
       }

          
       / 火狐4-18 /

          
       input:-moz-input-placeholder{

          
           color:blue;

          
       }

          
       / ie高版本，ie+ /

          
       input::-ms-input-placeholder{

          
           color:blue;

          
       }

          
       / 歐鵬 /

          
       input::-o-input-placeholder{

          
           color:blue;

          
       }

          
       

          
   </style>

          
</head>

          
<body>

          
<form action="" novalidate>

          
    <input type="email">

          
    <input type="submit">

          
    <br>

          
    <input type="url">

          
    <input type="submit">

          
    <br>

          
    <input type="range">

          
    <input type="submit">

          
    <br>

          
    <input type="number">

          
    <input type="submit">

          
    <br>

          
    <input type="search">

          
    <input type="submit">

          
    <br>

          
    <input type="color">

          
    <input type="submit">

          
    <br>

          
   <input type="time">

          
   <br>

          
   <input type="month">

          
   <br>

          
   <input type="week">

          
   <br>

          
   <!-- <input type="datetime-local> -->

          
   <input type="date">

          
   <br>

          
   <!-- <input type="text" required>

          
   <input type="submit"> -->

          
    <br>

          
    <input type="number" step="3">

          
    <input type="submit">

          
    <br>

          
    <input type="text" name="aa" autocomplete="off">

          
    <input type="submit">

          
    <br>

          
    <input type="text"  value="" placeholder="請輸入您的姓名："  autofocus>

          
    <input type="submit">

          
    <br>

          
    <input type="text" placeholder="請輸入您的手機號：" pattern="^1[3|5|8]\d{9}$">

          
    <input type="submit">

          
    <br>

          
    <input type="file" multiple>

          
    <br>

          
    <input type="url" list="lll">

          
    <datalist id="lll">

          
        <option value="http://www.baidu.com" label="百度"></option>

          
        <option value="http://www.sina.com" label="新浪"></option>

          
        </datalist>

          
    <input type="submit">

          
</form>

          
</body>

          
</html>

          


          
h5新增type類型：

          


          
Type=“email” 限制用戶必須輸入email類型

          
Type=“url” 輸入的網址前面必須加上http://

          
Type=“range” 產生一個滑動條表單

          
Type=“number” 必須輸入的是數字，調整數字大小(谷歌瀏覽器輸入字母不可以，但是可以輸入e；火狐可以輸入字母，不能提交)

          
Type=“search” 產生一個搜索意義的表單（火狐瀏覽器沒有叉號，谷歌有）

          
Type=“color” 生成一個顏色選擇的表單；

          
產生很大的兼容問題：

          


          
type=“time” 限制用戶必須輸入時間類型

          
type=“month” 限制用戶必須輸入月份類型（火狐瀏覽器不顯示）

          
type="week"限制用戶必須輸入周類型

          
type="datetime-local"選取本地時間

          
type=“date”

          
新增表單屬性：

          


          
required 檢測是否為空；

          


          
min:最小值

          


          
max：最大值

          


          
step：數值增加的幅度； 如果輸入的是step=“3”,搜索框輸入2，按住上鍵調的話，會是3，因為法定值：-3 0 3 6 9

          


          
autocomplete是否自動提示信息 on（默認值）off;和name="" 一起使用；

          


          
placeholder：文本框的提示信息(value的值得手動刪除，而placeholder不用刪除，可以直接輸入內容)

          


          
autofocus：自動聚焦，一個頁面只能存在一個聚焦（auto：自動）

          


          
pattern：后面的屬性值是一個正則表達式

          
//手機號驗證pattern=“^1[3][5]\d{9}$”

          


          
novalidate：取消驗證，放在form里面

          


          
multiple:選擇多個文件上傳

          


          
list:提示信息；必須結合datalist標簽，綁定datelist (谷歌提示value和label，而火狐只有label提示)

          


          
h5:新增的表單標簽

          


          
datalist

          
option

          
output:計算結果輸出、腳本的輸出

          

          
            
          
              
                評論(0)
                瀏覽(2973)
              
                          
          
          
          
                      
          
            
            
          子類對象實例化全過程
          
            
          
               seo達人                                            
          
            
          標準格式注意：

          
super()和this()調用語句不能同時在一個構造器中。

          
super()或this()調用語句只能作為構造器中的第一句出現。原因：

          
無論通過哪個構造器創建子類對象，需要保證先初始化父類。

          
目的是，當子類繼承父類后，“繼承”父類所有的屬性和方法，因此子類有必要知道父類如何為對象進行初始化。

          
從結果上看：繼承性

          
子類繼承父類以后，就獲取了父類中聲明的屬性或方法。

          
創建子類的對象，在堆空間中，就會加載所父類中聲明的屬性。

          
從過程上看：

          
當我們通過子類的構造器創建子類對象時，我們一定會直接或間接的調用其父類的構造器，進而調用父類的父類的構造器，…直到調用了java.lang.Object類中空參的構造器為止。正因為加載過所的父類的結構，所以才可以看到內存中父類中的結構，子類對象才可以考慮進行調用。

          
強調說明：

          
雖然創建子類對象時，調用了父類的構造器，但是自始至終就創建過一個對象，即為new的子類對象。

          

          
            
          
              
                評論(0)
                瀏覽(3159)
              
                          
          
          
          
                      
          
            
            
          CSS簡單實現圣杯布局和雙飛翼布局
          
            
          
               seo達人                                            
          
            
          一、你能學到什么？

          
①如何使用css變量 ②實現圣杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性

          


          
css變量設置(兩個布局都有的部分)

          
:root{

          
    / 左邊欄寬度 /

          
    --lw:300px;

          
    /負左邊欄寬度/

          
    --lwf:-300px;

          
    / 右邊欄寬度 /

          
    --rw:400px;

          
    /負左邊欄寬度/

          
    --rwf:-400px;

          
    / 高度 /

          
    --height:300px;

          
}

          


          
二、圣杯布局的html和css代碼

          
html部分

          
  <div class="holyGrail">

          
    <div class="hg_main">main</div>

          
    <div class="hg_left">left</div>

          
    <div class="hg_right">right</div>

          
  </div>

          


          
css 實現對應的四個class

          
.holyGrail {

          
    height: var(--height);

          
    / 留出左右兩欄的布局 為了字體不被覆蓋/

          
    padding-left: var(--lw);

          
    padding-right: var(--rw);

          
}

          
.hg_main{

          
    width:100%;

          
    float: left;

          
    height: var(--height);

          
    background-color: blanchedalmond;

          
}

          
.hg_left{

          
    position: relative;

          
    left: var(--lwf);

          
    float: left;

          
    margin-left: -100%;

          
    width:var(--lw);

          
    height: var(--height);

          
    background-color: blueviolet;

          
}

          
.hg_right{

          
    float: left;

          
    margin-right: var(--rwf);

          
    width:var(--rw);

          
    height: var(--height);

          
    background-color: brown;

          
}

          


          


          
三、雙飛翼布局的html和css代碼

          
html部分

          
<div class="doubleWing">

          
    <div class="dw_main">

          
      <div class="dw_con">main</div>

          
    </div>

          
    <div class="dw_left">left</div>

          
    <div class="dw_right">right</div>

          
  </div>

          


          
css 實現對應的五個class

          
.doubleWing{

          
    padding-right: var(--rw);

          
}

          
.dw_left{

          
    float: left;

          
    margin-left: -100%;

          
    width:var(--lw);

          
    height: var(--height);

          
    background-color: blueviolet;

          
}

          
.dw_main{

          
    width:100%;

          
    float: left;

          
    height: var(--height);

          
    background-color: blanchedalmond;

          
}

          
.dw_con {

          
margin-left: var(--lw);

          
}

          
.dw_right{

          
    float: left;

          
    margin-right: var(--rwf);

          
    width:var(--rw);

          
    background-color: brown;

          
    height: var(--height); 

          
}

          


          
四、學會兩個布局的注意點

          
圣杯布局

          
在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)

          
中間的div.hg_main放在最上面，優先渲染，中間div自適應，width為100%

          
左中右欄的div都設置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;

          
left: -（左欄的寬度）；會移動到最外層div的左內邊距的區域（中間div的左邊）

          
右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內邊距的區域（中間div的右邊）

          
雙飛翼布局

          
在中欄的div再加一個div,設置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動

          
最外層的div可以不用預留左欄的位置了

          
五、兩個布局的對比的優缺點

          
布局 優點 缺點

          
圣杯 無多余dom 當中間的寬度小于左右的寬度時，結構混亂

          
雙飛翼 可以支持各種寬度，通用性強較強 需要多加一層dom

          
代碼下載地址

          
記得一定要自己去實現一下

          

          
            
          
              
                評論(0)
                瀏覽(2677)
              
                          
          
          
          
                      
          
            
            
          關于javascript跳轉與返回和刷新頁面
          
            
          
               seo達人                                            
          
            
          javascript中window.open()與window.location.href的區別

          
window.open(‘index.html’) 表示新增一個窗口打開 index.html 這個頁面，并不刷新

          
location.href(‘index.html’) 表示在當前窗口重定向到新頁面，打開并刷新 index.html 這個頁面

          


          
window.location 是 window 對象的屬性，用來替換當前頁，也就是重新定位當前頁

          
而window.open 是 window 對象的方法，是用來打開一個新窗口的函數

          


          
 // 打開新頁面

          
 // 注意：有些瀏覽器的安全設置會將window.open()屏蔽，例如避免彈出廣告窗

          
 window.open('./index.html');

          


          
 // 在原窗口打開新頁面

          
 window.location.href＝"./index.html";

          


          
window.open()詳解

          


          
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')

          


          


          
參數解釋： 三個參數

          
window.open 彈出新窗口的命令；

          
‘page.html’ 彈出窗口的文件名；

          
‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；

          
height=100 窗口高度；

          
width=400 窗口寬度；

          
top=0 窗口距離屏幕上方的象素值；

          
left=0 窗口距離屏幕左側的象素值；

          
toolbar=no 是否顯示工具欄，yes為顯示；

          
menubar=no 是否顯示菜單欄，yes為顯示；

          
scrollbars=no 是否顯示滾動欄，yes為顯示；

          
resizable=no 是否允許改變窗口大小，yes為允許；

          
location=no 是否顯示地址欄，yes為允許；

          
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

          


          
常用的js返回與刷新頁面

          
在此用a標簽舉例

          


          


          
 <a href="javascript: history.back(-1)">返回上一頁</a> 

          
 <a href="javascript:history.go(-1)">返回上一頁</a> 

          
 <a href="javascript:history.go(-2)">返回前兩頁</a> 

          
 <a href="javascript:location.reload()">刷新當前頁面</a> 

          
 <a href="javascript:" onclick="self.location=document.referrer;">返回上一頁并刷新</a> 

          
 

          


          
js

          


          
 

          
 // 刷新當前頁面

          
 window.location.Reload();

          
 self.location.reload();

          
 window.location.href = window.location.href;

          

          
            
          
              
                評論(0)
                瀏覽(2154)
              
                          
          
          
          
                      
          
            
            
          彈性布局(Flex)+骰子旋轉實例^v^
          
            
          
               seo達人                                            
          
            
          彈性布局（Flex）

          
隨著移動互聯網的發展，對于網頁布局來說要求越來越高，而傳統的布局方案對于實現特殊布局非常不方便，比如垂直居中。

          
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。

          
下面是一些彈性布局的基本語法：

          
兩部分：

          

          

            

          1. 語法是添加到父容器上的

            
        display : flex;（彈性盒子的標志哦?。。。?br />
            
        flex-direction: row; 布局的排列方向 （主軸排列方向）

            
             row 默認值，顯示為行。方向為當前文檔水平流方向，默認情況下是從左往右。

            
             row-reverse  顯示為行。但方向和row屬性值是反的

            
             column  顯示為列

            
             column-reverse 顯示為列。但方向和column屬性值是反的

            
        flex-wrap : nowrap; 是否進行換行處理。

            
             nowrap; 默認值，不換行處理

            
             wrap; 換行處理

            
             wrap-reverse; 反向換行

            
        flex-flow : flex-direction flex-wrap 復合寫法 (是有順序的)。

            
        justify-content ; 屬性決定了主軸方向上子項的對齊和分布方式。  

            
            flex-start ： 子項都去起始位置對齊。

            
            flex-end ： 子項都去結束位置對齊。

            
            center ： 子項都去中心位置對齊。

            
            space-between : 表現為兩端對齊。多余的空白間距在元素中間區域分配，兩邊沒寬。 

            
            space-around : 邊緣兩側的空白只有中間空白寬度一半即每個塊都有左右間距。

            
            space-evenly :每個flex子項兩側空白間距完全相等。

            
        align-items : 每一行中的子元素上下對齊方式。

            
            stretch;默認值，flex子項拉伸

            
            flex-start;容器頂部對齊

            
            center;容器居中對齊

            
            flex-end;容器底部對齊

            
        align-content : 跟justify-content相反的操作。側軸的對齊方式。(最少需要兩行才能看出效果，因為他是多行的一個上下對齊方式)

            
            默認：多行下，有幾行就會把容器劃分為幾部分，默認就是stretch拉伸的。

            
            值跟justify-content取值是相同的。

            

            2. 

          2. 語法是添加到子容器上的？

            
        order : 排序(值越大越后)

            
            0：默認值      eg:1234

            
            1：放在后面    eg:1342

            
            -2：放在前面   eg:2134

            
        flex-grow : 擴展 ( 想看到擴展的效果，必須有空隙 )

            
            0 : 默認值 , 不去擴展

            
            0.5：占空隙的一半

            
            1 : 去擴展 , 會把空白區域全部沾滿

            
         （ 注：子元素會按照設置的比例值來分配空隙，如果比例值總和小于1，那么會有空隙，如果比例值總和大于等于1，那么就沒有空隙。）

            
        flex-shrink : 收縮

            
            正常默認值是1

            
            0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正?？s放1進行比較的）

            
        flex-basis : 跟flex-shrink/flex-grow很像。

            
            flex-shrink/flex-grow是設置一個比例值，flex-basis是設置一個具體值。

            
        flex : 一種復合寫法

            
            flex-grow  flex-shrink  flex-basis

            
            flex:1;

            
                flex : 1 1 0    

            
            flex:0;

            
                flex : 0 1 0

            
        algin-self: 跟align-items操作很像，區別就是只是針對某一個子項。

            
            

            


            
注：默認情況下，在彈性盒子中的子元素的左右排列的。

            
注：

            
    水平是主軸的時候：默認情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。

            
    垂直是主軸的時候：默認情況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。

            


            
注：當子項的總寬度大于父容器的時候，會自動收縮的（彈性的優先級是大于自身固定大小的）

            
注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢出的現象。

            


            
注：彈性布局中用的頻率比較多的語法：

            
    display : flex;

            
    flex-direction;

            
    justify-content;

            
    align-items;

            
    flex;

            


            
注：彈性布局的優勢是做一維布局，網格布局的優勢是做二維布局。

            


            
下面是彈性布局骰子案例代碼：

            


            
<!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>

            
        *{margin: 0;padding: 0;}

            
        ul{list-style: none;}

            
        a{text-decoration: none;}

            
        img{display: block;}

            


            
        .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}

            
        .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}

            


            
        .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

            
        .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

            
        .box2 div:nth-of-type(1){align-self: flex-start;}

            
        .box2 div:nth-of-type(2){align-self: flex-end;}

            


            
        .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}

            
        .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}

            
        .box3 div:nth-of-type(1){align-self: flex-start;}

            
        .box3 div:nth-of-type(3){align-self: flex-end;}

            


            
        .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            
        .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            
        .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

            


            
        .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            
        .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            
        .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

            


            
        .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}

            
        .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}

            
        .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

            


            
        #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 

            
        perspective: 500px;perspective-origin: right top;}

            
        #box .main{position: relative;width: 150px;height: 150px;margin: 125px;

            
        transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}

            
        #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;}

            
        #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}

            
        #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}

            
        #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}

            
        #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}

            
        #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;

            
        width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}

            


            
        #box:hover .main{transform:rotateY(360deg);}

            
    </style>

            
</head>

            
<body>

            
    <div id="box">

            
        <div class="main">

            
            <div class="box1">

            
                <div></div>

            
            </div>

            
            <div class="box2">

            
                <div></div>

            
                <div></div>

            
            </div>

            
            <div class="box3">

            
                <div></div>

            
                <div></div>

            
                <div></div>

            
            </div>

            
            <div class="box4">

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
            </div>

            
            <div class="box5">

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
                <div>

            
                    <li></li>

            
                </div>

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
            </div>

            
            <div class="box6">

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
                <div>

            
                    <li></li>

            
                    <li></li>

            
                </div>

            
            </div>

            
        </div>

            
    </div>

            
</body>

            
</html>

            


            

            3. 

          
            
          
              
                評論(0)
                瀏覽(3242)
              
                          
          
          
          
                      
          
            
            
          vue-router學習筆記
          
            
          
               seo達人                                            
          
            
          目錄

          
介紹

          
目錄

          
介紹

          
學習vue-router做的一些總結筆記，內容會持續更新！

          


          
目錄

          
1、HTML和JS中使用router

          
2、動態路由

          
3、嵌套路由

          
4、編程式導航

          
5、命名路由、命名視圖

          
6、重定向、別名

          
7、路由組件傳參

          
8、導航守衛

          
9、路由元信息

          
10、過度動效

          
11、數據獲取

          
12、滾動條位置

          


          

          
            
          
              
                評論(0)
                瀏覽(2492)
              
                          
          
          
          
                      
          
            
            
          Vue (一）、創建組件
          
            
          
               seo達人                                            
          
            
          使用 vue-cli 創建 vue 項目：

          


          
cd 到指定的目錄下 命令行輸入：

          


          
vue init webpack-simple <項目名稱>

          


          
 根據提示設置Project name

          


          
 設置Project description

          


          
 設置Author

          


          
 設置License

          


          
 設置Use sass?

          


          
cd到剛剛創建的項目名稱目錄

          


          
命令行輸入：npm install

          


          
等待安裝完成后 執行 npm run dev 命令

          


          
注：以下部分練習是在https://jsfiddle.net 中進行

          
創建組件：（創建全局組件）

          
Html 部分：

          
<div id="app">

          
<div>練習</div>

          
<!-- 這里的 inline-template 取代組件函數中的 template:'' -->

          
<my-cmp inline-template>

          
  <p>{{ status }}</p>

          
</my-cmp>

          
<hr>

          
<my-cmp inline-template>

          
  <p>第二次使用{{ status }}</p>

          
</my-cmp>

          
</div>

          


          
Js 部分：

          
Vue.component('my-cmp',{

          
 data: function () {

          
   return {

          
     status:'Critical'

          
    }

          
  },

          
 methods: {}

          


          
});

          


          
var vm = new Vue({

          
  el: "#app"

          
})

          


          
如果將data提取成公共的部分，則多次使用同一個組件則這部分數據在內存中使用的是同一塊存儲 如下演示：

          
html部分：

          
<div id="app">

          
  <div>練習</div>

          
  <my-cmp></my-cmp>

          
  <hr>

          
  <my-cmp></my-cmp>

          
</div>

          


          
Js 部分

          
var data = {status:'Critical'};

          
Vue.component('my-cmp',{

          
 data: function () {

          
   return data

          
  },

          
 template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

          
 methods: {

          
    changeStatus(){

          
     this.status = "Nomal"

          
    }  

          
 },

          


          
});

          
var vm = new Vue({

          
  el: "#app"

          
})

          


          
上面的js代碼當點擊按鈕的時候兩個組件引用的數據均會發生變化

          
局部注冊組件：

          
html部分：

          
<div id="app">

          
  <div>局部注冊組件練習</div>

          
  <local-cmp></local-cmp>

          
  <hr>

          
  <local-cmp></local-cmp>

          
</div>

          


          
Js 部分：

          


          
var cmp = {

          
   data: function () {

          
        return {

          
          status:'Critical'

          
        }

          
    },

          
   template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

          
   methods: {

          
      changeStatus(){

          
        this.status = "Nomal"

          
      }  

          
   },

          
};

          
var vm = new Vue({

          
  el: "#app",

          
  components:{'local-cmp':cmp}

          
})

          

          
            
          
              
                評論(0)
                瀏覽(2863)
              
                          
          
          
          
                      
          
            
            
          微信小程序入門——環境搭建以及開發工具的認識
          
            
          
               seo達人                                            
          
            
          環境搭建

          
首先在微信公眾平臺注冊一個我們自己的賬號：

          


          


          
根據注冊提示完成注冊

          

          

            

          1. 用我們剛剛注冊好的賬號登錄，進入微信官方文檔界面，下載微信開發者工具

            


            

            2. 

          2. 根據提示安裝好就可以登錄創建工程了！

            


            
開發工具的認識

            
開發工具的界面詳解：

            


            


            
MINA框架：

            
js文件：頁面中的邏輯界面；用于功能編寫

            
wxml文件：配置頁面元素及頁面布局

            
wxss文件：樣式文件，對頁面進行美化【在文件夾中重寫時，覆蓋默認的頁面樣式】

            
json文件：頁面的配置文件，例如tabBar的描述【在文件夾中重寫時，覆蓋默認的頁面結構】

            


            
App文件：

            
App.js文件：用于注冊一個小程序，并進行生命周期

            
App.json負責整個App的配置：

            
（1）pages：定義小程序的路由

            
（2）window：定義小程序的頂部菜單

            
（3）tabBar：定義小程序的底部Tab

            
（4）networkTimeout：定義小程序的超時

            
（5）debug：定義小程序的debug模式

            
App.wxss樣式會被整個App的頁面引用，公用css可以寫在這里

            


            
創建工程

            
1.登錄微信開發者工具，進行工程創建的信息填寫

            


            
-項目名稱必須與事先定好的路徑最后一個文件名相同，如果沒有，項目名稱將會自動修改為路徑里面最后一個文件名。若強行修改項目名稱，則會出現一下錯誤，導致無法創建。

            

            3. 

          3. 在微信公眾平臺找到我們的AppID，填在AppID的文本框內。也可以暫時使用測試號

            


            
3.創建完成后，根據需要就可以自己修改代碼，完成自己的小程序編寫了！

            

            4. 

          
            
          
              
                評論(0)
                瀏覽(3075)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合