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

首頁

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) 瀏覽(4479)

072018-5

你不知道的JavaScript：有趣的setTimeout

話不多說，先上代碼：

for(var j=0;j<10;J++){

setTimeout(function(){console.log(j);},5000)

}

看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執行結果是什么？

甲：順序打印0到9？

乙：這題我見過，打印十個10！

哪個答案正確？

執行結果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發現幾個問題：為什么會循環打印十個10,而不是0到9？

從結果來看，for循環執行完跳出之后，才開始執行setTimeout（所以j才等于10），為什么不是每次迭代都執行一次setTimeout呢？

1、為什么會循環打印十個10？

許多人習慣用第二個問題中的執行結果來回答這個問題：“for循環執行完畢跳出之后才開始執行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應付了自己，又應付了別人。其實，要解答第一個問題，首先要解答第二個問題。

2、為什么不是每一次迭代都執行一次setTimeout？

大家都知道，JavaScript在ES6出現以前，是沒有塊狀作用域的，這就意味著，在for循環中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環都是更新這個j。

那么現在的關鍵問題在于，為什么整個for循環會先于setTimeout執行，而不是我們正常理解的，一次迭代執行一次。這就涉及到了JavaScript的核心特性：單線程。

JavaScript設計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設想JavaScript同時有兩個線程，一個線程在DOM節點內添加內容，一個線程刪除該節點，瀏覽器就會出現混亂。所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成為了這門語言的核心特征，將來也不會改變。

單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行下一個任務，如果前一個任務耗時很長，后一個任務就不得不一直等著。

為了優化單線程的性能，JavaScript將任務分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程，而進入“任務隊列（task queue）”的任務，只用主線程中的同步任務執行完畢，異步任務才會進入執行隊列執行。只要主線程空了，就會去讀取“任務隊列”，這就是JavaScript的運作機制。這個過程會不斷重復。

而setTimeout就被JavaScript定義為異步任務。每次for循環的迭代，都將setTimeout中的回調函數加入任務隊列等待執行。也就是說，只有同步任務中的for循環完全結束，主線程中才會去任務列表中找到尚未執行的十個setTimeout（十次迭代）回調函數并順序執行（先進先出）。而此時，j已經經過循環結束變成了10，所以此時主線程執行的，是十個一模一樣的打印i的回調函數，即打印十個10,。至此完美回答了第一和第二個問題，文章開頭的代碼與下面的代碼其實是等價的：

for(var i=0;i<10;i++){

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

}

小小的一個setTimeout，牽扯出了很多JavaScript的深層次問題，可見JavaScript還有許多地方是值得深入探究的。

評論(0) 瀏覽(3250)

072018-5

UI設計、UE設計、交互設計分別是什么？

藍藍設計的小編

這些概念在傳統行業和傳統工業中其實已經發展的很成熟，近幾年隨著互聯網的發展又重新流行起來。

評論(0) 瀏覽(3805)

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) 瀏覽(5491)

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) 瀏覽(3334)

032018-5

小白怎么學習UI設計？UI設計學習步驟

藍藍設計的小編

UI設計行業剛剛在全球軟件業興起，屬于高新技術設計產業，國內外眾多大型IT企業均已成立專業的UI設計部門，但專業人才稀缺，人才資源爭奪激烈，就業市場供不應求。想要成為一個出色UI設計師，你需要掌握更多的技能和實踐。學習任何技術都有學習步驟，UI設計也是一樣。上海千鋒小編接下來為你介紹UI學習步驟。

評論(0) 瀏覽(3303)

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) 瀏覽(3540)

022018-5

UI視覺設計師，2018年薪風向是怎樣的？

藍藍設計的小編

隨著時代的發展，UI視覺設計逐漸成為人們最直觀、最挑剔的話題，視覺營銷的時代已經成為消費者習以為常的選擇，那么作為UI視覺設計師，2018年薪風向是怎樣的？

評論(0) 瀏覽(3132)

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) 瀏覽(3283)

« 1 ... 8 9 10 11

分類

日歷

鏈接

個人資料

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

存檔

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