如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
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: '人物關(guān)系：喬布斯', subtext: '數(shù)據(jù)來自人立方', 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 : "人物關(guān)系", 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.目錄文件結(jié)構(gòu)
話不多說，先上代碼：
for(var j=0;j<10;J++){
setTimeout(function(){console.log(j);},5000)
}
看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執(zhí)行結(jié)果是什么？
<!-- more -->
甲：順序打印0到9？
乙：這題我見過，打印十個10！
哪個答案正確？
執(zhí)行結(jié)果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發(fā)現(xiàn)幾個問題：為什么會循環(huán)打印十個10,而不是0到9？
從結(jié)果來看，for循環(huán)執(zhí)行完跳出之后，才開始執(zhí)行setTimeout（所以j才等于10），為什么不是每次迭代都執(zhí)行一次setTimeout呢？
1、為什么會循環(huán)打印十個10？
許多人習(xí)慣用第二個問題中的執(zhí)行結(jié)果來回答這個問題：“for循環(huán)執(zhí)行完畢跳出之后才開始執(zhí)行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應(yīng)付了自己，又應(yīng)付了別人。其實，要解答第一個問題，首先要解答第二個問題。
2、為什么不是每一次迭代都執(zhí)行一次setTimeout？
大家都知道，JavaScript在ES6出現(xiàn)以前，是沒有塊狀作用域的，這就意味著，在for循環(huán)中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環(huán)都是更新這個j。
那么現(xiàn)在的關(guān)鍵問題在于，為什么整個for循環(huán)會先于setTimeout執(zhí)行，而不是我們正常理解的，一次迭代執(zhí)行一次。這就涉及到了JavaScript的核心特性：單線程。
JavaScript設(shè)計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設(shè)想JavaScript同時有兩個線程，一個線程在DOM節(jié)點內(nèi)添加內(nèi)容，一個線程刪除該節(jié)點，瀏覽器就會出現(xiàn)混亂。所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成為了這門語言的核心特征，將來也不會改變。
單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行下一個任務(wù)，如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。
為了優(yōu)化單線程的性能，JavaScript將任務(wù)分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)；異步任務(wù)指的是，不進入主線程，而進入“任務(wù)隊列（task queue）”的任務(wù)，只用主線程中的同步任務(wù)執(zhí)行完畢，異步任務(wù)才會進入執(zhí)行隊列執(zhí)行。只要主線程空了，就會去讀取“任務(wù)隊列”，這就是JavaScript的運作機制。這個過程會不斷重復(fù)。
而setTimeout就被JavaScript定義為異步任務(wù)。每次for循環(huán)的迭代，都將setTimeout中的回調(diào)函數(shù)加入任務(wù)隊列等待執(zhí)行。也就是說，只有同步任務(wù)中的for循環(huán)完全結(jié)束，主線程中才會去任務(wù)列表中找到尚未執(zhí)行的十個setTimeout（十次迭代）回調(diào)函數(shù)并順序執(zhí)行（先進先出）。而此時，j已經(jīng)經(jīng)過循環(huán)結(jié)束變成了10，所以此時主線程執(zhí)行的，是十個一模一樣的打印i的回調(diào)函數(shù)，即打印十個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還有許多地方是值得深入探究的。
這些概念在傳統(tǒng)行業(yè)和傳統(tǒng)工業(yè)中其實已經(jīng)發(fā)展的很成熟，近幾年隨著互聯(lián)網(wǎng)的發(fā)展又重新流行起來。
constructor(public modalCtrl: ModalController) {
}
我們使用的是：ModalController 不是 NavController。
這兩者的區(qū)別為：
NavController 和 ModalController 都是打開新頁面，但是NavController 是直接將頁面放入到原有的頁面堆棧中的，而ModalController 是創(chuàng)建一個新的頁面堆棧（root nav stack），然后再放進去。
最直觀的界面效果區(qū)別：
NavController 方法跳轉(zhuǎn)的頁面，并不會移除Tabs ModalController 方法就會從底部彈出新的頁面，并且沒有了Tabs 菜單。
NavController 方法，新頁面默認有返回按鈕，使用 ModalController
文檔連接：
NavController ：https://ionicframework.com/docs/api/navigation/NavController/
ModalController：https://ionicframework.com/docs/api/components/modal/ModalController/
// cd到項目目錄，然后執(zhí)行下面的代碼 ionic g page login --no-module
命令的說明：
執(zhí)行完之后生成的文件，圖示：
進入 src/app 下，修改 app.module.ts
// 導(dǎo)入 loginPage import {LoginPage} from "../pages/login/login"; // 在以下節(jié)點上面添加 LoginPage declarations:[
LoginPage
],
entryComponents:[
LoginPage
]
我們程序進入的第一個界面，一般都是登錄界面，然后通過跳轉(zhuǎn)才到首頁。所以，我們需要修改下程序的邏輯。
進入 src/app/ 下，修改 app.component.ts
// 導(dǎo)入 loginPage import {LoginPage} from "../pages/login/login"; // 將源碼部分的 rootPage 指向到 LoginPage // rootPage:any = TabsPage; rootPage:any = LoginPage; // 這個地方就加載程序啟動的頁面
打開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>
圖示：
部分樣式說明：
// text-center 讓文字居中 <ion-title text-center>登錄</ion-title> // no-lines 去除底部的線條 <ion-item no-lines></ion-item> // item-left 讓文字居左 <label item-left>記住密碼</label>
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)); // 界面跳轉(zhuǎn) 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);
}
}
接下來的一篇介紹下：怎么實現(xiàn)記住密碼之后直接進入到首頁。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
注釋內(nèi)容以樣式為例，如下：
<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]-->
<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]-->
上面是除了IE瀏覽器外所有瀏覽器都識別這個樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一種寫法：
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
也可以寫成
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
前面我們也說過了lt和lte的區(qū)別,lt表示小于版本號，不包括條件版本號本身；而lte是小于或等于版本號，包括了版本號自身。
上面這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于gt和大于或等于gte達到上面的效果：
<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
或
<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]-->
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
UI設(shè)計行業(yè)剛剛在全球軟件業(yè)興起，屬于高新技術(shù)設(shè)計產(chǎn)業(yè)，國內(nèi)外眾多大型IT企業(yè)均已成立專業(yè)的UI設(shè)計部門，但專業(yè)人才稀缺，人才資源爭奪激烈，就業(yè)市場供不應(yīng)求。想要成為一個出色UI設(shè)計師，你需要掌握更多的技能和實踐。學(xué)習(xí)任何技術(shù)都有學(xué)習(xí)步驟，UI設(shè)計也是一樣。上海千鋒小編接下來為你介紹UI學(xué)習(xí)步驟。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
1、首先理解一下“深拷貝”和“淺拷貝”的區(qū)別：
淺拷貝：a = b;//a和b中存的是相同的地址，該地址指向堆內(nèi)存中相同的地方，即a和b就是一個東西，改變a的值b的值也會跟著改變，同理改變b的值a的值也會發(fā)生改變；
深拷貝：a和b中存的地址不同，但是地址對應(yīng)的堆內(nèi)存中的內(nèi)容完全一致，即b是a的副本
2、
（1）數(shù)組和對象的淺拷貝一樣 ，簡單的賦值操作
var b = a;
如數(shù)組的淺拷貝：
輸出的值為：
對象的淺拷貝：
輸出的值為：
（2）數(shù)組的深拷貝
ES5：var b = a.concat();
輸出的結(jié)果為：
ES6 let [...b] = a;
（3）對象的深拷貝
ES5:
輸出的結(jié)果為：
ES6：
let {...b} = a;
[javascript] view plain copy
[html] view plain copy
[javascript] view plain copy
[javascript] view plain copy
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
隨著時代的發(fā)展，UI視覺設(shè)計逐漸成為人們最直觀、最挑剔的話題，視覺營銷的時代已經(jīng)成為消費者習(xí)以為常的選擇，那么作為UI視覺設(shè)計師，2018年薪風(fēng)向是怎樣的？
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
1:獲取所有的
2：根據(jù)表格id獲取表格，在表格內(nèi)獲取
3：新建一個空數(shù)組，獲取所有name為”check”的多選框，循環(huán)判斷多選框是否被選中，如果被選中則添加到數(shù)組里，獲取輸出按鈕，然后為按鈕添加onclick事件，輸出數(shù)組長度即可。
基本選擇器：
層次選擇器：
<p>元素，對<p>元素繼續(xù)循環(huán)，因為獲取的是數(shù)組對象，給每個<p>元素添加行為事件
var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){
items[i].onclick=function(){ //do something }
}
<tbody>元素，在<tbody>元素下獲取<tr>元素，循環(huán)輸出獲取的<tr>元素，對元素的索引值除以2取模，然后根據(jù)奇偶設(shè)置不同的背景色。
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";
}
}
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);
}
#id $("#test")選取id為test的元素 .class $(".test")選取所有class為test的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>，<span>和擁有class為myClass的<p>標簽的一組元素
$("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");
藍藍設(shè)計的小編 http://sillybuy.com