setTimeout方法使用時需注意：
//以下兩種方式都行： setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000); function test(){ alert("aaaa"); } //以下是錯誤示例 setTimeout(test(),2000); //會馬上執行，沒有延遲效果
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeToggle() 方法：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
效果圖如下
//圖例組件
legend: {
top: 'center',
right: 30,
data: [],
width: "auto",
itemWidth: 10, // 小方塊尺寸
itemHeight: 10,
textStyle: {
color:'#90CCFF',
lineHeight:20,
// 通過rich自定義尺寸，加寬度使百分比及數值各自對齊
rich:{
a:{
width:100,
align:'left'
},
b:{
width:40,
align:'right'
}
}
},
orient: 'vertical', // 豎向排列
// 通過formatte自定義格式
// 因為formatter的參數里只有name一個參數，所以需要通過獲取的數據匹配顯示
// 這里的optionData是獲取到的數據，格式為
// optionData:[
// { value: 47.01, name: "水果" },
// { value: 31.67, name: "蔬菜" },
// { value: 12.51, name: "禽畜" },
// { value: 8.24, name: "禽蛋" },
// { value: 7.27, name: "水產品" },
// { value: 6.32, name: "其他" }
// ],
formatter: (name) => {
var total = 0;
var tarValue;
this.optionData.forEach((item,i) => {
total += Number(item.value)
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
var percent = ((tarValue / total) * 100).toFixed(2)
let arr = [
'{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'張}'
]
return arr
}
}
自定義legend的方式就是這樣，遇到格式不同的可以參考上面的方式自定義
單獨定義echarts中每個圖例的樣式,自定義圖例的點擊方法
//用不同樣式的圖例用數組寫對應圖例的樣式
legend:[{
top: "15%",
right: "24%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
itemWidth: 27,
itemHeight: 16,
data:[{
name: "農藥",
icon: "circle"
},{
name: "LOL",
icon: "rect"
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
itemWidth: 33,
itemHeight: 16,
data:[{
name: "農藥+LOL",
icon: "image:///soyking/static/image/echarts/merge.png" //引用自定義的圖片
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
data:["\n","\n","\n","農藥占比","LOL占比"]
}],
結果:
自定義圖例的方法 (點擊圖例，顯示圖例的選中結果)
var bar = echarts.init(document.getElementById("barDiv"));
//自定義圖例的方法
bar.on("legendselectchanged",function(obj){
//獲取圖例選擇的結果
var selected = obj.selected;
for(var i in selected){
alert(selected[i]);
}
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
代碼如下
var data = [ { name: "一次檢驗數/條", value: 150 }, { name: "多次檢驗數/條", value: 80 } ]; var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } },
echarts legend 自定義圖例
legend: {
selectedMode: true,
top: 0,
right: 0,
orient: 'vertical', // itemWidth: 24, // itemHeight: 2, textStyle: {
fontFamily: 'ABBvoiceCNSG-Regular',
fontSize: 12,
}, // icon: 'rect', data: [
{
name:"高嚴重等級報警",
icon:'rect',
},
{
name:"低嚴重等級報警",
icon: 'rect' },
{
name:"健康度",
icon: 'line' }
]
},
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
JS中的對象是屬性和行為的結合體，其中屬性是對象的靜態特征，行為又稱方法，是對象的動態特征。
JavaScript中的對象主要分為三大類：
定義非空對象
// 非空對象： var 對象名 = { 屬性名： 值, ... 方法名: function([參數]){ 方法體語句; } ... }
var p1 = { color: '黑色',//給對象添加屬性 weight: '188g',//屬性之間用逗號隔開 screenSize: 6.5, call: function(name){//給對象添加方法 console.log("打出電話："+name); }, sendMassage: function(msg){ console.log("發出的信息是："+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機顏色:"+p1['color']);//也可以使用 對象['屬性']來輸出屬性值 console.log("手機重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調用對象的發方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1);
使用new Object()創建對象
var p = new Object(); // 創建一個空對象p
p2.name = '劉備'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//調用對象的方法
可以使用構造函數來創建對象：
語法： new 構造函數名( )
function Student(name,sex,age){ this.name = name;//這里的this指向的是構造函數新創建的對象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } var s1 = new Student('喬峰','男',28);//s1為構造函數創建的新對象 即實例 s1.show(); var s2 = new Student('段譽','男',23); s2.show();
注意："構造函數"可以有參數，也可以沒有參數，如果沒有參數小括號可以省略
遍歷對象的屬性和方法：使用for…in循環
for(var 變量名 in 對象名){ 循環語句 }
function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } // s2是要遍歷的對象 var s2 = new Student('段譽','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽 男 23 }
in運算符
判斷成員(屬性)在對象中是否存在，存在返回true;不存在返回false。
JavaScript提供了很多常用的內置對象，包括數學對象Math、日期對象Date、數組對象Array以及字符串對象String等。
Math對象：用來對數字進行與數學相關的運算，不需要實例化對象，可以直接使用其靜態屬性和靜態方法.
Math對象:不需要實例化
Math.PI:算數常量PI Math.abs(x):返回x的絕對值
Math.max(args...):返回最大數
Math.min(args...):返回最小數
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算術平方根
Math.random():返回0.0到1.0之間的隨機數
Math.round(x):返回最接近x的整數
Math.floor(x):返回一個小于等于x 并且與它最接近的整數
Math.ceil(x):返回一個大于等于x 并且與它最接近的整數
Date對象：需要使用new Date()實例化對象才能使用，創建一個對象 Date()是一個構造函數，可以給該構造函數傳遞參數生成一個日期對象。
// 1.創建一個Date對象 沒有參數 var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時 分 秒 創建一個指定日期時間的Date對象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個日期和時間字符串創建一個Date對象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對象距離1970年1月1日午夜之間的毫秒數 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021
數組：是一些類型相同的數據的集合，它和普通的對象功能類似，也是用來存儲一些值，數組是使用數字來作為索引操作內部的元素。
數組的創建
var arr=[]//創建一個空數組
var arr = new Array();//定義一個空數組
判斷一個對象是不是數組的兩種方法：
var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue
關于數組的其他方法之前的文章要有詳細介紹，這里不多做解釋。
String對象:字符串對象，必須使用new String()來創建
字符串常用方法
- charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 連接多個字符串 - charCodeAt(n) 返回n位置上的ASCII碼 - split('分隔符') 將字符串按給定的分隔符 轉換成字符串數組 - substr(start,length) 從start開始提取length個字符構成一個新串 - substring(from,to) 提取from和to之間的字符串構成一個新串 - toLowerCase() 將串中的大寫字符轉換成小寫 不影響原字符串 返回一個新字符串 - toUpperCase() 將串中的所有小寫轉換成大寫 不影響原字符串 返回一個新字符串 - replace(str1,str2) 使用str2替換字符串中的str1 返回替換結果 不影響原字符串
// 輸入一個由字母組成的字符串,統計串中每個字母出現的次數 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個小寫字母各自出現的次數 var upper = new Array(26);// 存放26個大寫字母各自出現的次數 // 初始化兩個數組 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper);
/* 輸入一個十進制整數和一個數制（2、8、16）將該十進制整數轉換成
對應的數值格式輸出
取余法：
m=15 k=8
m%k 將余數存放在數組中
*/ var m = parseInt(prompt('請輸入一個整數：')); var k = parseInt(prompt('請輸入一個數制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數制轉換的結果 var i = 0; while(m!=0){//對m進行數制轉換 將余數放在arr數組里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('轉換的結果為：'+str);
值類型: 簡單的數據類型(字符串,數值型,布爾型,undefined,null)
引用類型: 復雜數據類型(對象) 變量中保存的是引用的地址
注意： 引用類型的特點是，變量中保存的僅僅是一個引用的地址，當對變量進行賦值時，并不是將對象復制了一份，而是將兩個變量指向了同一個對象的引用。
下面對內存中的棧和堆進行分析
棧(stack)：會自動分配內存空間，會自動釋放，簡單數據類型存放到棧里面。
堆(heap)：動態分配的內存，大小不定也不會自動釋放，復雜數據類型存放到堆里面。
由此可見存放在堆內存中的對象，變量實際保存的是一個指針，這個指針指向另一個位置，通過這個指針來尋找堆中存儲的對象的屬性和值，并且每個空間大小不一樣，要根據情況開進行特定的分配。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自csdn博客
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.隨著互聯網的發展，頁面傳遞給后臺有太多需要驗證的東西，盡管后端的代碼是能夠實現對傳遞過來的數據進行校驗和判斷的，但是這樣的話無疑是加重了后臺程序的工作任務量，于是廣大互聯網工作人員迫切需要有一種新的辦法/語言能夠實現這樣的效果，于是js也就是在這樣的一個大的時代背景下誕生的
2.js最開始的時候是不叫js而是叫scrpit語言，他們也想將這個前景光明的明日之星賣給微軟，但是微軟沒有買下，在種種機緣巧合之后被Sun公司收購了，為了讓其與java語言走的近點 ，更是改名為JavaScript簡稱為js
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成
1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
1.弱類型語言：在書寫的時候不去做明確的數據類型的限定 例如 var a=3.14 var b=“998”
2.運行在瀏覽器端的解釋執行性語言(js—>node.js可以運行在服務器上)
3.基于對象的編程語言
4.跨平臺性：JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
5.動態性：JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁（Home Page）中執行了某種操作所產生的動作，就稱為“事件”（Event）。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
可以簡單的理解為：只要用戶發出動作，js就會產生響應
6.安全性：JavaScript是一種安全性語言，它不直接允許訪問本地的硬盤，并不能直接將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
小結：js現在的用途
1）作用于瀏覽器端幫助提升用戶的體驗度
2 ) 可以用來編寫游戲腳本
3）可以被構建成各種組件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*彈出對話框*/ </script> </body> </html>
小結：1.js在頁面內使用的時候必須要寫在<script>標簽內
2.js代碼書寫的時候不用分號標識一行編程語句的結束
3.在js代碼中xxx():此時表明這是一個函數
4.alert():以彈窗的形式將括號內的內容展示出來
JavaScript： 是一個腳本語言。它是一個輕量級，但功能強大的編程語言
1.數據類型：雖然JavaScript在書寫校驗上不去區分數據的類型，但是并不意味著是不區分數據類型，而是通過在瀏覽器中內置的JS解析器/引擎自動的去判斷的
---------------------------------------------------------------------------------------------------------
1.1數字：
var a=12 //整數
var b=2.3 //浮點數或者說是小數型
var c=-0.5
友情提示：1）在js中變量名必須以字母或下劃線（"_"）開頭
2）變量可以包含數字、從 A 至 Z 的大小寫字母
3）JavaScript 區分大小寫，即變量 myVar、 myVAR 和 myvar 是不同的變量
---------------------------------------------------------------------------------------------------------
1.2邏輯型或布爾型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一個未聲明的變量，或已聲明但沒有賦值的變量，或一個并不存在的對象屬性
null:可以通過將變量的值設置為 null 來清空變量，其意思為空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用單引號或雙引號
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默認是格里尼形式的日期格式/
提示：Date是js中的一個內置的類
new：為類Date在內存中創建一個內存空間，進而實現實例化
補充：關鍵字：就是具有特殊含義的詞
---------------------------------------------------------------------------------------------------------
1.6數組：是一種存放數據的容器，其一般可以存放多個，且需要知道其長度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注釋：
單行注釋：//
多行注釋：/**/
擴展：注釋的作用：
1）統一規范
2）注解，幫助理解/閱讀代碼
3）扯淡
---------------------------------------------------------------------------------------------------------
連接字符和轉義字符：
連接字符：在js中場用+表示為連接字符
例如： var a=123
alert(‘變量a的值為：’+a)
轉義字符：具有特殊含義的字符
\n 換行符 alert(“這是第一局 \n 這是第二句”)
\t 制表符 alert(“這是第一局 \t 這是第二句”)
---------------------------------------------------------------------------------------------------------
2.運算符：
2.1算術運算符： +， -， *， /， %，++，--
++：自動加1 例如 var a=12
alert(a++)
++在前：先計算再輸出； ++在后：先輸出再計算
–：自動減1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2關系運算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3邏輯運算符：
與 ：&& ：全真為真，只要有一個假則為假
或 ：|| ：全假為假，只要有一個為真則為真
非 ：！ ：取相反的
JavaScript 可以通過不同的方式來輸出數據：
1）使用 window.alert() 彈出警告框。
<html> <body> <h1>使用 window.alert() 彈出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法將內容寫到 HTML 文檔中。
<html> <body> <h1>我的第一個 Web 頁面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 寫入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 寫入到 HTML 元素</h1> <p id="demo">我的第一個段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，將前面定位到的選擇器中的標簽內容進行更改
4）使用 console.log() 寫入到瀏覽器的控制臺。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 寫入到瀏覽器的控制臺</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()會將想要輸出的數據寫到網頁的控制臺中顯示
1）順序語句：js默認是從上向下自動執行的
2）選擇語句：
2.1）二路分支：
if(條件)
{
//JavaScript代碼;
}
else
{
//JavaScript代碼;
}
2.2）多路決策：
switch (表達式)
{
case 常量1 :
JavaScript語句;
break;
case 常量2 :
JavaScript語句;
break;
…
default :
JavaScript語句;
}
小結：switch…case…default不僅有多路決策的特性，還有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循環語句：
for循環語句：
for (var i=0;i<10;i++) { alert("當前i的值為:"+i) }
while循環語句：
var i =1 while (i>5) { alert("當前i的值為："+i) i++; }
do…while循環：
var i=5 do { alert("執行了") i++; } while (i<5);
備注：for：知道次數的循環
while：>=0次的循環
do…while：>=1次的循環
break：語句用于跳出循環。
continue：用于跳過循環中的一個迭代。
1.typeof 操作符：可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。
2.將數字轉換為字符串
var a=123 //第一種方法，用String //var castResult=String(a) //第二種方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.將字符串轉換為數字
var a="123" //用Number轉換 var b=Number(a) //用parseInt方法將字符串強行轉換為數字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正則表達式
2.search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下標位置 alert(str.search("er")) //返回 4 //查查找不到的時候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//顯示結果為Hello javascript
語法： function 函數名( ){
}
實例一
<html> <head> <meta charset="UTF-8"> <title>JS函數</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定義一個求和函數，當點擊求和按鈕的時候將計算出傳入的兩個參數的和
ps：onclick單擊事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
實例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
創建一個數組：三種方式
1：常規方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李寧" myCars[2]="安踏" alert(myCars[1]) </script>
2：簡潔方式
<script type="text/javascript"> var myCars=new Array("nike","李寧","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李寧","安踏"]; alert(myCars[1]) </script>
2：訪問數組：通過指定數組名以及索引號碼，你可以訪問某個特定的元素
例如：var name=myCars[0];
3:數組的方法和屬性
數組名.length ： 數組 中元素的數量
數組名.indexOf(“abc”)：“abc” 值在數組中的索引值
4：數組的排序
數組名.sort(); ：將數組按正序排序，但是是按照字符串的排序方式來排序，不管里面是數字還是什么都是按字符串的排序方式來排序
reverse（）：將一個數組中的元素的順序反轉，（即是將數組中的元素的頭變成尾，尾變成了頭，不是其他的）
擴展：將數組先用sort（）方法進行正序排序，在利用reverse（）方法反轉，即可達成降序的目的
字符串中常用的屬性和方法
str.length:獲取字符串的長度
str.match("")：內容匹配
str.replace（）：替換內容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.對象：是屬性和/方法的組合
屬性：是對象所擁有的一組外觀特征，一般為名詞
方法：是對象可以執行的功能，一般為動詞
例如：對象：汽車
屬性：型號：法拉利 顏色：綠色
方法：前進、剎車、倒車
PS:三類已經存在的對象：
瀏覽器對象：BOM(已經存在于瀏覽器中的，到時候我們直接調用即可，例如Screen,History,Location,Navigator)
js腳本對象:數組，字符串，日期，Math等(JS語言中已經寫好的具有某一些功能的對象，例如Array,Number,Math…)
HTML文檔對象：DOM（已經存在于HTML中的，且已經寫好了，用的時候可以直接調用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轎車"; this.fun=function(){alert("100km/h");} } var car1=new Car("奧迪","藍色"); var car2=new Car("奔馳","綠色"); alert(car1.type); //轎車 car1.fun();//100km/h </script>
1.id選擇器：通過 id 查找 HTML 元素，如果找到該元素，則該方法將以對象的形式返回該元素。
document.getElementById("id1").value //獲取id為id1的標簽中的value值
2.name選擇器：通過name查找到HTML的元素，如果找到元素了，則會返回一個數組
var arr=document.getElementsByName("like") //將name為like的標簽全部存入arr數組中
3.通過標簽名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都與步驟2一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示確認框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品訂單");//彈出一個確定框，確定，返回true，取消返回false if(r==true){ x="提交成功，已確定" } else{ x="提交失敗，已取消" }、 //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定，會在屏幕顯示”提交成功，已確定“，點擊取消，會在屏幕顯示"提交失敗，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示輸入框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("請輸入你的名字","Hello"); //彈出對話框，可輸入名字 //判斷如果輸入的不為空或者不是空字符串，則x被賦值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的開始，加油" } //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定以后則會將被賦值的x顯示在屏幕中
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自csdn博客
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用js動態引入js和css文件方法
方法1：
//引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script);
方法2：
//引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element);
方法3：
var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在源代碼加上
<i class="layui-icon layui-icon-tips" lay-tips="最大長度為16個文字" ></i>
加上js代碼
$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');
this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在項目實際開發我們會遇到表格列過多，表格內容過長的困擾，表格數據的展現很不理想，今天我為大家介紹如何結合Datatables 使用表格固定列；
1、在屏幕足以展現內容的情況下
2、模擬屏幕過小 或表格列過多的情況
從效果圖可以看出，我將左側兩列和右側一列 作為固定列 ，中間內容可拖動顯示
//引入juqery datables fixedColumns 根據各自的樣式需求 本人使用的是bootstrap
<link href="您的資源目錄/dataTables.bootstrap.css" rel="stylesheet">
<link href="您的資源目錄/fixedColumns.bootstrap.css">
<script src='您的資源目錄/jquery.js'></script>
<script src='您的資源目錄/jquery.dataTables.min.js'></script>
<script src='您的資源目錄/dataTable.fixedColumns.js'></script>
//異步請求獲取表格渲染數據
var dataTable;
$(function () {
dataTable = $('#表格ID')..DataTable({
"processing": true,
"serverSide": true,
"ajax": {url: "您的請求URL"},
"scrollX": true,
"autoWidth": true,
"columns": [
...
]
});
})
new $.fn.dataTable.FixedColumns(dataTable,{
"iLeftColumns":2, //開啟左側兩列固定
"iRightColumns":1, //開啟右側1列固定
"drawCallback": function(){
//重繪的回調執行
}
});
在datableas 初始化后 根據設定的開啟固定列，獲取datables 對應表格數據 進行復制，然后采用position: absolute 在原表格 上加多一層固定列表格的展現，感興趣的朋友可以瀏覽器DEBUG查閱；
1、固定列出現滾動條
出現這個問題是 dataTable.fixedColumns.js 插件計算固定列寬的問題，可以在源碼進行修改；或者在fixedColumns.js 重繪成功后回調中執行
$(".DTFC_Cloned").css("width","auto");
2、采用ICheck 插件無法點擊 和 勾選問題
原因：因為異步加載數據的問題 ，我們每次在datables重繪的回調函數中 進行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才執行的 ，上文也提到固定列實現的原理，其復制了固定列數據 position: absolute，那么展現給我們看到的是已經初始化的ICheck ，真正可以勾選點擊的其實在下一層；
解決思路：在fixedColumns.js 重繪成功后回調中初始化ICheck； 再重新注冊全選 和反選事件；
//朋友們可以根據需求 自定定義自己的初始化和事件注冊
new $.fn.dataTable.FixedColumns(dataTable,{
"iLeftColumns":2,
"iRightColumns":1,
"drawCallback": function(){
//重繪Icheck 這里是我封裝的初始化方法
iCheckInitFunction();
//重新設置全選事件 這里是我全選/反選的注冊事件
TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
}
});
大家可以選擇適合自己的樣式
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
默認展開
// 所有節點加載完成后觸發$('#jstree1').on("ready.jstree", function(e, data) {// 默認選擇節點$('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);// 默認展開/打開全部$('#jstree1').jstree().open_all();});// 選擇更改時觸發$('#jstree1').on("changed.jstree", function(e, data) {console.log(data.selected);});
默認收起
// 所有節點加載完成后觸發$('#jstree1').on("ready.jstree", function(e, data) {// 默認選擇節點$('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);// 默認關閉/收起宣布$('#jstree2').jstree().close_all();});// 選擇更改時觸發$('#jstree1').on("changed.jstree", function(e, data) {console.log(data.selected);});藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn