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

首頁

092018-5

px、em、rem、%、vw、vh、vm這些單位的區別

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1.背景介紹

我們為什么要選擇合適的網頁設計單位

隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。

網頁設計單位是涉及到我們布局的效果，使用不同的單位會對最終的demo，會有影響。

現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂布局。

所以需要我們選擇合適的單位來進行開發，設計。
2.知識剖析

1、px

px就是pixel的縮寫，意為像素。px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。

是我們網頁設計常用的單位，也是基本單位。通過px可以設置固定的布局或者元素大小，缺點是沒有彈性。

特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。

2、em

參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點是1. em的值并不是固定的； 2. em會繼承父級元素的字體大小。
3、rem

rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設置1.2rem就是12px.以此類推。

優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。

4、%

一般來說就是相對于父元素的，

1、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3、對于position: fixed;的元素是相對于ViewPort（可視窗口），
5、vw

css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px

舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px

舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。

7、vm

css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。

兼容性太差，現在基本上沒人用，我試了一下Chrome就用不了。

3.常見問題

假如使用em來設置文字大小要注意什么？

4.解決方案

注意父元素的字體大小，因為em是根據父元素的大小來設置的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.

特別是在多重div嵌套里面更要注意。

5.擴展思考

css還有哪些長度單位？

in:寸

cm:厘米

mm:毫米

t:point，大約1/72寸

pc:pica，大約6pt，1/6寸

6.更多問題
1.pc pt ch一般用在什么場景?
這些我們網頁設計基本上用不到，在排版上會有用處。

2.如何使 1rem=10px
在設置HTML{font-size：62.5%；}即可

3.如果父元素沒有指定高度，那么子元素的百分比的高度是多少？
會按照子元素的實際高度，設置百分比已經沒有效果了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3266)

082018-5

Java跨域問題的解決方案及axios的跨域請求方法封裝

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

原因

出于安全考慮，瀏覽器有一個同源策略。瀏覽器中，異步請求的地址與目標地址的協議、域名和端口號三者與當前有不同，就屬于跨域請求。

限制跨域訪問是瀏覽器的一個安全策略，因為如果沒有這個策略，那么就有被跨站攻擊的危險。比如，攻擊者在自己的網站A放置一個表單，這個表單發起DELETE請求，刪除某個用戶在B網站上的個人資料。如果沒有同源策略保護，那么在同一個瀏覽器內，如果用戶已經登錄了B網站，這個刪除的請求就會被接受，導致在用戶不知情的情況下自己在B網站中的資料被刪除。

解決方式

瀏覽器的同源策略提升了安全性，但是給需要在不同域名下開發的開發者帶來了跨域問題。

解決跨域的問題主要有：
jsonp和cors。jsonp是利用 script 標簽可以跨域加載的特性而創造出來的一種非正式的跨域解決方案。在實際開發中，推薦使用cors，即在服務端返回時加入允許跨域的請求頭，允許指定域名的跨域訪問。

千萬要小心！這種直接加 * 號的做法是相當危險的，千萬別這么做！

response.addHeader("Access-Control-Allow-Origin", "*");

1

正確的做法：

1. 創建一個 Filter 類

/** * 使用Filter的方式解決跨域問題 */ public class CorsFilter implements Filter { private static final List<String> ALLOW_ORIGINS = Config.getListString("allowOrigins", ","); private static final String REQUEST_OPTIONS = "OPTIONS"; @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; String orgHeader = request.getHeader(HttpHeaders.ORIGIN); if (orgHeader != null && ALLOW_ORIGINS.contains(orgHeader)) { // 允許的跨域的域名 response.addHeader("Access-Control-Allow-Origin", orgHeader); // 允許攜帶 cookies 等認證信息 response.addHeader("Access-Control-Allow-Credentials", "true"); // 允許跨域的方法 response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT, HEAD"); // 允許跨域請求攜帶的請求頭 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"); // 返回結果可以用于緩存的最長時間，單位是秒。-1表示禁用 response.addHeader("Access-Control-Max-Age", "3600"); // 跨域預檢請求，直接返回 if (REQUEST_OPTIONS.equalsIgnoreCase(request.getMethod())) { return; } } filterChain.doFilter(request, response); } @Override public void destroy() { } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

2. 在 web.xml 的最前面注冊這個 Filter

<filter> <filter-name>corsfilter</filter-name> <filter-class>com.bj58.crm.plus.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>corsfilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> </filter-mapping>

1

2

3

4

5

6

7

8

9

前端使用 axios 可以先進行封裝

http-util.js

let axios = require("axios"); let qs = require("qs"); axios.defaults.withCredentials = true; axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; function post(url, param) { return axios.post(url, qs.stringify(param)) } function get(url, param) { axios.get(url, {params: param}) } export default { get, post };

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3671)

072018-5

echarts 實現關系圖表

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1.效果如上，官方示例簡化

2.force1.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html>

3.echartsExample.js

var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose(); } myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize; } var option = { title : { text: '人物關系：喬布斯', subtext: '數據來自人立方', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : ' }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true} } }, legend: { x: 'left', data:['家人','朋友'] }, series : [ { type:'force', name : "人物關系", ribbonType: false, categories : [ { name: '人物' }, { name: '家人' }, { name:'朋友' } ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' } }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' } }, emphasis: { label: { show: false // textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE }, nodeStyle : { //r: 30 }, linkStyle : {} } }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[ {category:0, name: '喬布斯', value : 10, label: '喬布斯\n（主要）'}, {category:1, name: '麗薩-喬布斯',value : 2}, {category:1, name: '保羅-喬布斯',value : 3}, {category:1, name: '克拉拉-喬布斯',value : 3}, {category:1, name: '勞倫-鮑威爾',value : 7}, {category:2, name: '史蒂夫-沃茲尼艾克',value : 5}, {category:2, name: '奧巴馬',value : 8}, {category:2, name: '比爾-蓋茨',value : 9}, {category:2, name: '喬納森-艾夫',value : 4}, {category:2, name: '蒂姆-庫克',value : 4}, {category:2, name: '龍-韋恩',value : 1}, ], links : [ {source : '麗薩-喬布斯', target : '喬布斯', weight : 1, name: '女兒'}, {source : '保羅-喬布斯', target : '喬布斯', weight : 2, name: '父親'}, {source : '克拉拉-喬布斯', target : '喬布斯', weight : 1, name: '母親'}, {source : '勞倫-鮑威爾', target : '喬布斯', weight : 2}, {source : '史蒂夫-沃茲尼艾克', target : '喬布斯', weight : 3, name: '合伙人'}, {source : '奧巴馬', target : '喬布斯', weight : 1}, {source : '比爾-蓋茨', target : '喬布斯', weight : 6, name: '競爭對手'}, {source : '喬納森-艾夫', target : '喬布斯', weight : 1, name: '愛將'}, {source : '蒂姆-庫克', target : '喬布斯', weight : 1}, {source : '龍-韋恩', target : '喬布斯', weight : 1}, {source : '克拉拉-喬布斯', target : '保羅-喬布斯', weight : 1}, {source : '奧巴馬', target : '保羅-喬布斯', weight : 1}, {source : '奧巴馬', target : '克拉拉-喬布斯', weight : 1}, {source : '奧巴馬', target : '勞倫-鮑威爾', weight : 1}, {source : '奧巴馬', target : '史蒂夫-沃茲尼艾克', weight : 1}, {source : '比爾-蓋茨', target : '奧巴馬', weight : 6}, {source : '比爾-蓋茨', target : '克拉拉-喬布斯', weight : 1}, {source : '蒂姆-庫克', target : '奧巴馬', weight : 1} ] } ] }; var echarts; require.config({ paths: { echarts: './js' } }); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return; } // 按需加載 isExampleLaunched = 1; require( [ 'echarts', 'echarts/chart/force', 'echarts/chart/chord', ], requireCallback ); }
4.目錄文件結構

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4525)

042018-5

ionic3學習之登錄頁

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

準備工作

部分源碼說明：

constructor(public modalCtrl: ModalController) {
}


    
        1
    

    
        2

我們使用的是：ModalController 不是 NavController。

這兩者的區別為：
NavController 和 ModalController 都是打開新頁面，但是NavController 是直接將頁面放入到原有的頁面堆棧中的，而ModalController 是創建一個新的頁面堆棧（root nav stack），然后再放進去。

最直觀的界面效果區別：

使用Tabs 菜單，使用NavController 方法跳轉的頁面，并不會移除Tabs
菜單；但是使用ModalController 方法就會從底部彈出新的頁面，并且沒有了Tabs 菜單。
使用NavController 方法，新頁面默認有返回按鈕，使用 ModalController
方法新頁面默認是沒有返回按鈕的。

文檔連接：
NavController ：https://ionicframework.com/docs/api/navigation/NavController/
ModalController：https://ionicframework.com/docs/api/components/modal/ModalController/

// cd到項目目錄，然后執行下面的代碼 ionic g page login --no-module


    
        1
    

    
        2

命令的說明：

ionic g page login 生成的 page 上面帶有 module 文件
ionic g page login –no-module 生成的 page 上面不帶有 module 文件

執行完之后生成的文件，圖示：
login

添加到根模塊

進入 src/app 下，修改 app.module.ts

// 導入 loginPage import {LoginPage} from "../pages/login/login"; // 在以下節點上面添加 LoginPage declarations:[
    LoginPage
],
entryComponents:[
    LoginPage
]


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

修改程序的首頁

我們程序進入的第一個界面，一般都是登錄界面，然后通過跳轉才到首頁。所以，我們需要修改下程序的邏輯。
進入 src/app/ 下，修改 app.component.ts

// 導入 loginPage import {LoginPage} from "../pages/login/login"; // 將源碼部分的 rootPage 指向到 LoginPage // rootPage:any = TabsPage; rootPage:any = LoginPage; // 這個地方就加載程序啟動的頁面


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

修改登錄界面

修改login.html

打開login.html文件，寫入以下代碼

<ion-header> <ion-navbar> <ion-title text-center>登錄</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list inset> <ion-item> <ion-input type="text" value="admin" placeholder="用戶名" #username></ion-input> <ion-icon ios="ios-person" md="md-person" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item> <ion-input [type]="isShow ? 'text':'password'" value="88888" placeholder="密碼" #password></ion-input> <ion-icon ios="ios-key" md="md-key" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item no-lines> <ion-label> <!-- 控制字體圖標的顯示是由 ios 以及 md 兩個屬性控制的  --> <ion-icon [ios]="isShow ? 'ios-eye' : 'ios-eye-off'" [md]="isShow ? 'md-eye' : 'md-eye-off'"></ion-icon> </ion-label> <ion-toggle checked="false" [(ngModel)]="isShow"></ion-toggle> </ion-item> <ion-item no-lines> <label item-left>記住密碼</label> <ion-toggle checked="false" [(ngModel)]="isRemember"></ion-toggle> </ion-item> </ion-list> <div padding> <button ion-button block color="primary" (click)="_login(username, password)">登錄</button> </div> </ion-content> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39

圖示：
這里寫圖片描述

部分樣式說明：

// text-center 讓文字居中 <ion-title text-center>登錄</ion-title> // no-lines 去除底部的線條 <ion-item no-lines></ion-item> // item-left 讓文字居左 <label item-left>記住密碼</label>


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

修改login.ts

import { Component } from '@angular/core';
import { ModalController, ToastController} from 'ionic-angular';
import { TabsPage} from "../tabs/tabs";
import {Storage} from "@ionic/storage";

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage { public isRemember: boolean = false; public isShow: boolean = false;

  iconStyle: object = {'color':'#488aff','font-size':'1.4em'};

  constructor(public modalCtrl: ModalController, public toastCtrl: ToastController, public storage: Storage) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  _login(username: HTMLInputElement, password: HTMLInputElement){ if (username.value.length === 0){ this.showToast("bottom", "請輸入"); return false;
    } if (password.value.length === 0){ this.showToast("bottom", "請輸入密碼"); return false;
    } let data = {username: username.value, password: password.value, isRemember: this.isRemember}; // 儲存用戶信息 this.storage.remove("USER_INFO"); this.storage.set("USER_INFO", JSON.stringify(data)); // 界面跳轉 let modal = this.modalCtrl.create(TabsPage, data);
    modal.present();
  }

  showToast(position: string, message: string) { let toast = this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: position
    });

    toast.present(toast);
  }
}


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58

接下來的一篇介紹下：怎么實現記住密碼之后直接進入到首頁。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(5531)

032018-5

HTML條件注釋用法詮釋

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

HTML條件注釋用法詮釋

注釋內容以樣式為例，如下：

1、支持所有IE瀏覽器



1

2

3

2、支持非IE瀏覽器



1

2

3

上面是除了IE瀏覽器外所有瀏覽器都識別這個樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一種寫法：

 <link rel="stylesheet" type="text/css" href="not-ie.css" /> 

1

2

3

3、僅僅支持IE10



1

2

3

4、支持IE10以下版本（IE9以及IE9以下版本）

這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。



1

2

3

也可以寫成



1

2

3

前面我們也說過了lt和lte的區別,lt表示小于版本號，不包括條件版本號本身；而lte是小于或等于版本號，包括了版本號自身。

上面這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于gt和大于或等于gte達到上面的效果：

5、高于IE9的版本(IE10以及IE10以上版本)



1

2

3

或



1

2

3

6、指定多種IE版本



1

2

3

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3375)

022018-5

javascript中數組和對象的深拷貝和淺拷貝

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1、首先理解一下“深拷貝”和“淺拷貝”的區別：

淺拷貝：a = b;//a和b中存的是相同的地址，該地址指向堆內存中相同的地方，即a和b就是一個東西，改變a的值b的值也會跟著改變，同理改變b的值a的值也會發生改變；

深拷貝：a和b中存的地址不同，但是地址對應的堆內存中的內容完全一致，即b是a的副本

2、

（1）數組和對象的淺拷貝一樣，簡單的賦值操作

var b = a;

如數組的淺拷貝：

[javascript] view plain copy

var a = ['1','2','3'];

var b = a;

b[0] = '5';

console.log('a',a);

console.log('b',b);

輸出的值為：

對象的淺拷貝：

[html] view plain copy

var a = {name:'1',age:'2',color:'3'};

var b = a;

b.name = '5';

console.log('a',a);

console.log('b',b);

輸出的值為：

（2）數組的深拷貝

ES5：var b = a.concat();

[javascript] view plain copy

var a = ['1','2','3'];

var b = a.concat();

b[0] = '5';

console.log('a',a);

console.log('b',b);

輸出的結果為：

ES6 let [...b] = a;

（3）對象的深拷貝

ES5:

[javascript] view plain copy

var a = {name:'1',age:'2',color:'3'};

function copyObj(a) {

var b = {};

for(var key in a) {

b[key] = a[key];

}

return b;

}

var c = copyObj(a);

c.name = '5';

console.log('c',c);

console.log('a',a);

輸出的結果為：

ES6：

let {...b} = a;

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3601)

012018-5

jQuery選擇器(二)基本選擇器+層次選擇器

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1:獲取所有的<p>元素，對<p>元素繼續循環，因為獲取的是數組對象，給每個<p>元素添加行為事件

var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){ items[i].onclick=function(){ //do something } }

1

2

3

4

5

6

2：根據表格id獲取表格，在表格內獲取<tbody>元素，在<tbody>元素下獲取<tr>元素，循環輸出獲取的<tr>元素，對元素的索引值除以2取模，然后根據奇偶設置不同的背景色。

var item=docuement.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="#888"; } }

1

2

3

4

5

6

7

8

3：新建一個空數組，獲取所有name為”check”的多選框，循環判斷多選框是否被選中，如果被選中則添加到數組里，獲取輸出按鈕，然后為按鈕添加onclick事件，輸出數組長度即可。

var btn=document.getElementById("btn"); btn.onclick=function(){ var array=new Array(); var items=document.getElementsByName("check"); for(i=0;i<items.length;i++){ if(items[i].checked){ array.push(items[i].value); } } alert(array.length); }

1

2

3

4

5

6

7

8

9

10

11

12

基本選擇器：

#id $("#test")選取id為test的元素 .class $(".test")選取所有class為test的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>，<span>和擁有class為myClass的<p>標簽的一組元素

1

2

3

4

5

層次選擇器：

$("ancestor descendant") $("div span")選取<div>里面所有的<span>元素 $("parent>child") $("div >span")選取<div>元素下元素名為<span>的子元素 $("prev+next") $(".one+div")選取class為one的下一個<div>同輩元素 $("#two~div")選取id為two的元素后面的所有<div>同輩元素后面兩個用得少，因為在jQuery里可以用更加簡單的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3350)

272018-4

HTML基礎應用

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

本篇文章基本介紹了學習HTML的一些基礎的語法與標簽，標簽包括換行</br>，加粗<b>,下劃線<hr/>斜體字<i>,字體<h1....6>，標題<title>......

<small>

<small> 標簽呈現小號字體效果

。如果被包圍的字體已經是字體模型所支持的最小字號，那么 <small> 標簽將不起任何作用。

<small> 標簽也可以嵌套，從而連續地把文字縮小。每個 <small> 標簽都把文本的字體變小一號，直到達到下限的一號字。

<sub>表示下標<sup>表示上標。

<p>與<pre>有些類似

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

<pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

p 元素會自動在其前后創建一些空白。

<ul>與<ol>

兩者都指列表，前者是無序的，后者是有序的。

[html] view plain copy

<html>

<head>

<span style="color:#33ff33;"><title></span>HTML 5 Tag Reference</title>

</head>

<body>

<span style="color:#33ff33;"><h1></span>The content of the document......<span style="color:#33ff33;"><br/></span></h1>

<h2>The content of the document......<br/></h2>

<h3>The content of the document......<br/></h3>

<h4>The content of the document......<br/></h4>

<h5>The content of the document......</h5>



<h1>The content of the document......<br/></h1>

<h1><span style="color:#33ff33;"><small></span>The content of the document......</small><br/></h1>



<span style="color:#33ff33;"><pre></span>

HTML基礎應用



HTML基礎應用學習和掌握HTML語言的基本語法，常用的標簽的使用方法；學會使用HTML設計基本的簡單



網頁。



</pre>

<span style="color:#33ff33;"><hr/></span>

<span style="color:#33ff33;"><p>

<i></span>This is some text in a very short paragraph</i>

</p>

<span style="color:#33ff33;"><b></span>The content of the document......</b></br>



a<span style="color:#33ff33;"><sup>2</sup><sub>0</sub></span>+b<sup>2</sup><sub>0</sub>=c<sup>2</sup><sub>0</sub>



<span style="color:#33ff33;"><ul></span>

<li>sports</li>

<li> food </li>

<li> drink </li>

<li> friends </li>

</ul>

<span style="color:#33ff33;"><ol></span>

    <li>sports</li>

    <li> drink</li>

    <li> friends</li>

</ol>



<span style="color:#33ff33;"><dl> </span>

<dt>計算機</dt>

    <dd>用來計算的儀器 ... ...</dd>

<dt>顯示器</dt>

    <dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>



</body>

</html>

效果：

其中<title>體現在最上方的搜索欄中。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3917)

262018-4

用Flow提升前端代碼健壯性

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

看一段常見代碼：

//例1 function foo(x) { return x + 10 } foo('Hello!') //例2 function main(params){ //fn1函數獲取了一個數據 var object = fn1(params) //fn2根據獲數據，產生一個結果 var result = fn2(object) return result }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

例2很明顯，這個過程非常的‘黑’，如果你想知道object包含什么數據的話，可以：

打印一下 console.log(object)

查看fn1的注釋，并且保佑它的注釋是正確，全面的

或結合1，2，然后仔細查看fn1的源碼，希望它不是很復雜

被上述步驟折磨完之后，終于能真正的寫點代碼了，但是依舊得非常小心，因為這里還有另一個函數：fn2

在修改代碼的時候，得保證result這個結果沒有被影響，那么如何保證呢？

很簡單，重復上面的步驟，搞清楚result包含的數據，在測試的時候確保其數據跟原先的相同。
…

動態類型一時爽，代碼重構火葬場
知乎傳送門:為什么說“動態類型一時爽，代碼重構火葬場”

是時候徹底優化這個煩人的問題了

引入類型系統

其實問題的根源就是因為javascript太靈活了，在代碼運行期間幾乎可以做任何的修改，

沒有東西可以在代碼層面保證某個變量，某個函數跟預期的一致。

所以要加入類型系統來確保代碼的可靠性，在后期維護的時候同樣能夠傳達出有效的信息

Flow & TypeScript

Flow是個JavaScript的靜態類型檢查工具，由Facebook出品的開源碼項目，問世只有兩三年，是個相當年輕的項目。簡單來說，它是對比TypeScript語言的解決方式。

會有這類解決方案，起因是JavaScript是一種弱(動態)數據類型的語言，弱(動態)數據類型代表在代碼中，變量或常量會自動依照賦值變更數據類型，而且類型種類也很少，這是直譯式腳本語言的常見特性，但有可能是優點也是很大的缺點。優點是容易學習與使用，缺點是像開發者經常會因為賦值或傳值的類型錯誤，造成不如預期的結果。有些時候在使用框架或函數庫時，如果沒有仔細看文件，亦或是文件寫得不清不楚，也容易造成誤用的情況。

這個缺點在應用規?；瘯r，會顯得更加嚴重。我們在團隊開發協同時，一般都是通過統一的代碼規范，來降低這個問題的發生，但JS語言本身無法有效阻止這些問題。TypeScript這樣的強(靜態)類型的JavaScript超集語言就開始流行，用嚴格的角度，以JavaScript語言為基底，來重新打造另一套具有強(靜態)類型特性的語言，就如同Java或C#這些語言一樣，這也是為什么TypeScript稱自己是企業級的開發JavaScript解決方案。

TypeScript存在的問題

TypeScript自然有它的市場，但它有一些明顯的問題：

首先是JavaScript開發者需要再進一步學習，內容不少

有一定陡峭的學習曲線

已經在使用的應用代碼，需要整個改用TypeScript代碼語法，才能發揮完整的功用。這對很多已經有內部代碼庫的大型應用開發團隊而言，將會是個重大的決定，因為如果不往全面重構的路走，將無法發揮強(靜態)類型語言的最大效用eg:angular2

*所以許多現行的開源碼函數庫或框架，并不會直接使用TypeScript作為代碼的語言，另一方面因為TypeScript并非是普及到一定程度的語言。
當然TypeScript也是個活躍的開源碼項目，發展到現在也有一段時間，它的背后有微軟公司的支持，全新打造過的Angular2框架中(由Google主導)，也采用了TypeScript作為基礎的開發語言*。

Flow你的新選擇

現在，Flow提供了另一個新的選項，它是一種強(靜態)類型的輔助檢查工具。Flow的功能是讓現有的JavaScript語法可以事先作類型的聲明(定義)，在開發過程中進行自動檢查，當然在最后編譯時，一樣可以用babel工具來移除這些標記。

相較于TypeScript是另外重新制定一套語言，最后再經過編譯為JavaScript代碼來運行。Flow走的則是非強制與非侵入性的路線。

Flow的優點

輕且易學易用
它的學習曲線沒有TypeScript來得高，雖然內容也很多，但半天學個大概，就可以漸進式地開始使用

Flow從頭到尾只是個檢查工具
不是新的程序語言或超集語言，所以它可以與各種現有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標記就是回到原來的代碼，沒什么負擔

so

選擇flow.js工具而不選擇TypeScript強類型語言的原因顯而易見？
flow.js對工程的侵入性很小，無需大量的額外工作就能使用起來

從一個小例子演示

這種類型不符的情況在代碼中非常容易發生，例如上面的例1:

function foo(x) { return x + 10 } foo('Hello!')

1

2

3

4

5

x這個傳參，我們在函數聲明時希望它是個數字類型，但最后使用調用函數時則用了字符串類型。最后的結果會是什么嗎？ “Hello!10”，這是因為加號(+)在JavaScript語言中，除了作為數字的加運算外，也可以當作字符串的連接運算。想當然這并不是我們想要的結果。

聰明如你應該會想要用類型來當傳參的識別名，容易一眼看出傳參要的是什么類型，像下面這樣:

function foo(number) { return number + 10 }

1

2

3

如果在復合類型的情況，例如這個傳參的類型可以是數字類型也可以是布爾類型，你又要如何寫得清楚？

如果是個復雜的對象類型時，結構又該如何先確定好？

另外還有函數的返回類型又該如何來寫？

利用Flow類型的定義方式，來解決這個小案例的問題，可以改寫為像下面的代碼:

// @flow function foo(x: number): number { return x + 10 } foo('hi')

1

2

3

4

5

6

7

當使用非數字類型的值作為傳入值時，就會出現由Flow工具發出的警告消息，像下面這樣:

[flow] Cannot call foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)

如果是要允許多種類型也是很容易可以加標記的，假使這個函數可以使用布爾與數字類型，但返回可以是數字或字符串，就像下面這樣修改過:

// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' } foo(1) foo(true) foo(null) // 這一行有類型錯誤消息

1

2

3

4

5

6

7

8

9

10

11

12

在多人協同開發某個有規模的JavaScript應用時，這種類型的輸出輸入問題就會很常遇見。如果利用Flow工具的檢查，可以避免掉許多不必要的類型問題。

真實案例

可能你會認為Flow工具只能運用在小型代碼中，其實不然，Vue源碼中大量使用flowjs中類型檢測：

Flow使用

1. flow init
2. // @flow 或 /* @flow */
3. IDE插件或 flow check
在Visual Studio Code中因為它內建TypeScript與JavaScript的檢查功能，如果要使用Flow工具來作類型檢查，需要在用戶設置中，加上下面這行設置值以免沖突:

“javascript.validate.enable”: false

4 . babel插件在編譯時就會一并轉換Flow標記

{ "plugins": [ "transform-flow-strip-types" ] }

1

2

3

4

5

Flow支持的數據類型

Flow支持原始數據類型，如下面的列表:

boolean

number

string

null

void

類型別名&常見語法

// @flow export type Test = { titleOne?: string, titleTwo: ?string } var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical'; type T = Array<string> var x: T = [] x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = [] xx = [{titleOne: '1', titleTwo: false}] type MyObject = { foo: number, bar: boolean, baz: string, }; let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

React中的應用

如果你在React class里面使用了React.PropTypes規范，你可以對JSX上的attributes做靜態類型檢查：

var Hello = React.createClass ({ propTypes: { name: React.PropTypes.string.isRequired } ... }); //<Hello/> //Flow就會發現缺少屬性的錯誤 //<Hello name={42}/>//屬性類型的錯誤

1

2

3

4

5

6

7

8

import * as React from 'react'; type Props = { foo: number, bar?: string, }; function MyComponent(props: Props) { props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>; } <MyComponent foo={42} />

1

2

3

4

5

6

7

8

9

10

11

12

13

14

更多關于支持React的細節請移步 https://flow.org/en/docs/react/components/
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3747)

252018-4

如何看待CSS中BEM的命名方式？

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

BEM的意識就是塊(block)、元素(element)、修飾符(modifier)，是由yandex團隊提出的一種CSS Class命名方法。

任何一個東西的存在都有其存在的道理，如果他毫無價值，那么肯定會被淘汰，后人可能都不了解，甚至都不會出現在后人的世界里。

關于BEM命名其最大的爭議就是其命名風格，它鼓勵一級一級的寫的非常具體，但是會很長。如此常的命名會影響書寫效率，名稱過長代碼量就會增多，文件體積就會變大(在gzip下這個不算是個問題)，從而會影響傳輸速度，用戶體驗度就低，但是作為一個職業人我們都不能單純把個人喜好和習慣作為借口來拒絕或否定其用途。

風格對于使用者來說并不是很重要，關鍵的是看其效果。正所謂人們常說的“不看療程，看療效”。

從擴展性上來看，嵌套過多閱讀性差，超過3層就很難閱讀了;嵌套越多，選擇器的層級也會隨之增多，那么性能不知不覺就會變差;如此長的名字，書寫上想沖突都難。

從編程原則上來說，這種命名方式不會暴露抽象類。假如樣式變了需要繼承另一個抽象類，不需要改HTML，只需要改css即可。

團隊開發中，風格無非是一種形式，可以約束人們達到一定程度上的統一。內部溝通會極大降低溝通成本。

BEM命名的方法雖然有自身的不足之處，但至少他可以使我們命名的時候達到一定的統一，我們可以學習其優秀的方面將其納為己用。在實際項目開發中將其巧妙而又靈活的運用起來也未嘗不是一件壞事。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3525)

« 1 ... 116 117 118 119 120 121 122 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

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