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實現數組去重,顯示重復元素及個數的方法。分享給大家供大家參考，具體如下：
<script> var arr = ['土豆','土豆','茄子','土豆','茄子','土豆','紫紅色'];
function qc(arr){
var resultObj = {};
var result = [];
var result2 = [];
for(var i=0; i<arr.length; i++){
if(result.indexOf(arr[i]) == -1){
result.push(arr[i]);
}else{
if(result2.indexOf(arr[i]) == -1){
result2.push(arr[i]);
}
}
}
var obj = {}
arr.forEach((v,k)=>{
if(obj[v]){
obj[v]++;
}else{
obj[v] = 1;
}
});
resultObj.result = result;
resultObj.result2 = result2;
resultObj.obj = obj;
return resultObj
}
console.log(qc(arr));
</script>
|
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：
雙層for循環遍歷
var result=[];
for(var i=0; i<arr.length; i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i] === arr[j]){
j=++i
}
}
result.push(arr[i])
}
document.write(result)
}
qc(a);
</script>
|
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：站長之家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最做了郵箱簽名的需求，想著之前做過兩次簽名也不是很難 于是開始了本次outlook簽名的超長途旅行
本次總結不到位的或者不正確的地方 還請大神指正
首先手擼一個table出來 寫內容
1.郵件使用table+css布局
2.郵件主要部分在body內部，所以樣式一定要寫成內嵌的，不能在head標簽中寫style，也不能外聯。
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微軟雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
<tbody>
<tr>
<td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
<table width="100%" border="0" cellpadding="5" cellspacing="0" >
<tbody>
<tr>
<td>
<p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br> 尊敬的開發者：<br> </p>
<p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;"><br> “xxx”在此次的‘網絡友好度測試’評級：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
3.不能用浮動的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識別，但是在outlook中無法識別。
4.表格的border，使用table上的border屬性，可以在qq瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，我么只能給每一個td加一個border，在table中使用border-collapse:collapse;來合并重復的邊框。
如：
1
<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
這樣設置border會在outlook中顯示不出border；
5.為了保證兼容性，需要把郵件的寬度設置為600px，最大600px；
6.少用img，因為很多郵箱客戶端默認不顯示圖片，所以，如果需要圖片的話，一定要寫好alt和title；
7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，
1
<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
8.郵件不支持javascript，flash以及一些特殊的標簽。
因為不能浮動 定位 等 一些設計筆記復雜的內容 需要橫向排列的 只能多擼幾個table了 暫時我是這樣解決的 比較麻煩
在outlook簽名中最難處理的行高，line-height屬性，outlook的這個屬性只能支持在塊上設置，比如可以給td標簽設置line-height，但是不能給span設置line-height，否則行高設置是不起作用的。
具體內容可以根據實際情況改寫。修改簽名文件后，最好關閉outlook重新打開一下，要不然outlook里面會有緩存，造成顯示錯誤。
緊接著 在圖片引用上遇到了問題
https的圖片調用 outlook竟然給屏蔽了， 需要用戶開啟權限才能顯示 非常影響用戶體驗，
于是我就把圖片換成base64格式引用， 同樣遇到了問題， base64格式下 outlook無法使用style操控圖片尺寸，這就使圖片的寬高變成非常小，同樣清晰度也大大降低，
而且outlook在引用base64格式圖片情況下 如果圖片過小 還會出現部分黑邊 十分的麻煩
目前暫時沒找他其他的方案處理，有大神幫忙指點下
最總邊學邊做的情況下完成了這個簽名， 雖然一路坎坷 還算比較滿意的完成了這次簽名
記錄一下 繼續學習
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
默認的版本太低了，手動安裝有一些麻煩，想采用Yum安裝的可以使用下面的方案：
注：如果想升級到5.6把上面的55w換成56w就可以了。
我們要使用yum來安裝php-fpm和比較新版本的php,nginx,MySQL-server的話， 首先得給yum添加幾個源，CentOS默認的源里面軟件比較舊，有些軟件、庫還沒有。
EPEL源：
Extra Packages for Enterprise Linux (or EPEL)或者叫企業版 Linux 附加軟件包， 是一個由特別興趣小組創建、維護并管理的，針對 紅帽企業版 Linux(RHEL)及其衍生發行版 (比如 CentOS、 Scientific Linux)的一個高質量附加軟件包項目。
EPEL 的軟件包通常不會與企業版 Linux 官方源中的軟件包發生沖突，或者互相替換文件。 EPEL 與 Fedora 項目基本一致，包含完整的構建系統、升級管理器、鏡像管理器等等。
EPEL源官方網站：https://fedoraproject.org/wiki/EPEL
添加EPEL源：
32位CentOS，在命令行運行下面命: rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/i386/epel-release-6-8.noarch.rpm
64位CentOS，在命令行運行下面命令: rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpmEPEL源只能作為CentOS官方源的補充，里面還都是一些系統基礎的軟件包， 我們要安裝的php，php-fpm，mysql等軟件里面還是沒有，所以接下來添加另一個軟件源Remi。
Remi源中的軟件幾乎都是最新穩定版?；蛟S您會懷疑穩定不？放心吧， 這些都是Linux骨灰級的玩家編譯好放進源里的，他們對于系統環境和軟件編譯參數的熟悉程度毋庸置疑。
Remi官方網站：http://rpms.famillecollet.com/
添加Remi源，不管32位還是64位的系統，運行下面命令: rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
Remi源默認是沒有啟用的，我們來啟用Remi源，修改 /etc/yum.repos.d/remi.repo 文件，把文件內的 enabled=0 改為 enabled=1 ，注意：改文件內有2個 enabled=0 我們修改[remi]下面的，不要修改[remi-test]下面的。
到這里yum源的配置結束，下面安裝軟件就簡單了。安裝時候有詢問y/n的時候都是y
安裝php,php-fpm以及php擴展： yum install php php-fpm php-bcmatch php-gd php-mbstring php-mcrypt php-mysql
PHP配置文件php.ini路徑： /etc/php.ini
php-fpm配置文件php-fpm.conf路徑：/etc/php-fpm.conf
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1： 檢查是否安裝了MySQL組件。
[root@DB-Server init.d]# rpm -qa | grep -i mysql
mysql-community-client-5.7.19-1.el7.x86_64
mysql-community-common-5.7.19-1.el7.x86_64
mysql-community-libs-compat-5.7.19-1.el7.x86_64
mysql-community-libs-5.7.19-1.el7.x86_64
qt-mysql-4.8.5-13.el7.x86_64
mysql57-community-release-el7-11.noarch
mysql-community-server-5.7.19-1.el7.x86_64
perl-DBD-MySQL-4.023-5.el7.x86_64
2： 卸載前關閉MySQL服務
systemctl stop mysqld
yum -y remove mysql-community-client-5.7.19-1.el7.x86_64
yum -y remove mysql-community-common-5.7.19-1.el7.x86_64
yum -y remove mysql-community-libs-compat-5.7.19-1.el7.x86_64
yum -y remove mysql57-community-release-el7-11.noarch
yum -y remove mysql-community-server-5.7.19-1.el7.x86_64
3：刪除MySQL對應的文件夾
檢查各個MySQL文件夾是否清理刪除干凈。
[root@DB-Server init.d]# whereis mysql
mysql:
[root@DB-Server init.d]# find / -name mysql
/var/lib/mysql
/var/lib/mysql/mysql
/usr/lib64/mysql
[root@DB-Server init.d]# rm -rf /var/lib/mysql
[root@DB-Server init.d]# rm -rf /var/lib/mysql/mysql
[root@DB-Server init.d]# rm -rf /usr/lib64/mysql
4：確認MySQL是否卸載刪除
[root@DB-Server init.d]# rpm -qa | grep -i mysql
5：重新安裝MySQL5.6版本，主要參考 （略寫，主要參考以下鏈接）
http://blog.csdn.net/huhuhuemail/article/details/77498891
shell> wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm shell> yum mysql57-community-release-el7-11.noarch.rpm
-
這步如果報錯：已加載插件：fastestmirror, langpacks
-
沒有該命令：mysql57-community-release-el7-11.noarch.rpm。請使用 /usr/bin/yum --help
改用以下命令：
-
yum localinstall mysql57-community-release-el7-11.noarch.rpm
-
-
shell> yum repolist enabled | grep "mysql.*-community.*"
-
-
shell> yum install mysql-community-server
-
-
修改mysql配置文件
-
啟動MySQL服務
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么要寫這篇文章，因為現在在網上找的資料基本都是錯誤的，或者有錯誤，看著不爽。
在百度上搜 centos7 mysql 錯的最離譜的就是這篇http://jingyan.baidu.com/article/ce436649fec8533773afd385.html 照著裝了半天裝了是mariadb
后來找了一些文章，發現基本都過時了。
因為直接yum install mysql 是裝不上mysql的！！ 而是裝上了mariadb ！ 那就是因為默認的倉庫里就是mariadb的包
那yum這么好的工具用不了就？？ 當然有解決辦法，我在官網上找到一篇文章叫做“A Quick Guide to Using the MySQL Yum Repository“ 就是教我們如何用yum工具安裝mysql的
首先 將mysql加到yum倉庫中 (我這的命令都是centos7的，其他liunx平臺用啥命令，你們自己搞定哈)
shell > wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
shell > rpm -ivh mysql-community-release-el7-5.noarch.rpm
然后再在命令行里輸入
shell > yum repolist all | grep mysql
結果：
mysql-connectors-community/x86_64 MySQL Connectors Community enabled: 14
mysql-connectors-community-source MySQL Connectors Community - So disabled
mysql-tools-community/x86_64 MySQL Tools Community enabled: 19
mysql-tools-community-source MySQL Tools Community - Source disabled
mysql55-community/x86_64 MySQL 5.5 Community Server disabled
mysql55-community-source MySQL 5.5 Community Server - So disabled
mysql56-community/x86_64 MySQL 5.6 Community Server enabled: 154
mysql56-community-source MySQL 5.6 Community Server - So disabled
mysql57-community-dmr/x86_64 MySQL 5.7 Community Server Deve disabled
mysql57-community-dmr-source MySQL 5.7 Community Server Deve disabled
一堆disabled，只看enable的，可以輸入命令
shell > yum repolist enabled | grep mysql
結果：
mysql-connectors-community/x86_64 MySQL Connectors Community 14
mysql-tools-community/x86_64 MySQL Tools Community 19
mysql56-community/x86_64 MySQL 5.6 Community Server 154
這里再多數一句，可以看到先在mysql5.6 是可用的，可我就想裝現在最新版的5.7可咋辦？ 是有辦法的。
需要修改文件，執行以下命令
shell > vi /etc/yum.repos.d/mysql-community.repo
會看到
[mysql-connectors-community]
name=MySQL Connectors Community
baseurl=http://repo.mysql.com/yum/mysql-connectors-community/el/7/$basearch/
enabled=1
gpgcheck=1
gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
[mysql-tools-community]
name=MySQL Tools Community
baseurl=http://repo.mysql.com/yum/mysql-tools-community/el/7/$basearch/
enabled=1
gpgcheck=1
gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
# Enable to use MySQL 5.5
[mysql55-community]
name=MySQL 5.5 Community Server
baseurl=http://repo.mysql.com/yum/mysql-5.5-community/el/7/$basearch/
enabled=0
gpgcheck=1
gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
# Enable to use MySQL 5.6
[mysql56-community]
name=MySQL 5.6 Community Server
baseurl=http://repo.mysql.com/yum/mysql-5.6-community/el/7/$basearch/
enabled=1
gpgcheck=1
gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
# Note: MySQL 5.7 is currently in development. For use at your own risk.
# Please read with sub pages: https://dev.mysql.com/doc/relnotes/mysql/5.7/en/
[mysql57-community-dmr]
name=MySQL 5.7 Community Server Development Milestone Release
baseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$basearch/
enabled=0
gpgcheck=1
gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
我們只需要把5.7的enabled 改成1 把5.6的enabled改成0 就行了。 我裝啥版本無所謂，這塊我沒有親自去試過，直接安裝默認版本。
上邊所有的工作都做完了，我們終于可以用我們最喜歡的yum來安裝了
shell > yum install mysql-community-server
安裝過程省略，一路按y
成功之后，啟動mysql
shell > service mysqld start
查看mysql 的狀態
shell > service mysqld status
現在還需設置root的密碼，刪除匿名用戶等一些設置，我看其他文章寫的很復雜，其實有一個簡單的命令
shell > mysql_secure_installation
初始密碼為空，直接按回車鍵，然后輸入你想設置的密碼，其他的根據你自己的需求，y或者n
that is all
如果有錯誤，請及時聯系，互相學習，互相進步，謝謝。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在一個工程中數據庫往往要分為實際運用數據庫和測試數據庫，最直接的方法當然是從源數據庫中導出.sql文件再導入到本地的數據庫中，我這的實例是原有一個項目數據庫在服務器上現在想導出一份到本地做測試用，工程中用的是mysql-connector-java-5.1.13-bin.jar，而我現有的mysql數據庫是
mysql-connector-java-5.1.6-bin.jar不知道是否是版本不一，在本地使用navicat for mysql可以連接到服務器數據庫，但是從服務器數據庫導出的.sql文件后再導入到本地的數據庫中總是出現錯誤：
[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ****
[Err] /*
一、在網上找了很多方法都無法解決，無意中看到一個mysql數據同步的方法：
1>在本地建一個與數據庫同名的數據庫
2>選擇navicat中連接服務器的數據庫，在菜單欄選擇工具-->數據傳輸
3>在彈出的的窗口中“源”部分就是你要導出的源數據庫，“目標”就是本地的數據庫，點擊左下角全選后，再點擊開始按鈕
點擊確定
點擊關閉
再來查看一下本地數據庫，是不是數據和結構都已經導入到本地數據庫中了呢。
二、從備份中導出.sql再導入到本地數據庫中
1>在連接服務器中的數據庫上新建備份，選中要備份的數據庫-->點擊菜單欄上的備份-->新建備份
2>選擇備份文件提取SQL
這樣我們就得到了備份轉儲的.sql文件，再將這個.sql文件導入到本地的數據庫中，結果...就不再提示有錯誤了，
果真是菜鳥，要學的還很多
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
apache
啟動
systemctl start httpd
停止
systemctl stop httpd
重啟
systemctl restart httpd
或者
service httpd stop
service httpd start
service httpd restart
mysql
啟動
systemctl start mysqld
停止
systemctl stop mysqld
重啟
systemctl restart mysqld
或者
service mysqld stop
service mysqld start
service mysqld restart
php-fpm
啟動
systemctl start php-fpm
停止
systemctl stop php-fpm
重啟
systemctl restart php-fpm
nginx
啟動
systemctl start nginx
停止
systemctl stop nginx
重啟
systemctl restart nginx
或者
service nginx stop
service nginx start
service nginx restart
開機自啟
chkconfig httpd on
chkconfig mysqld on
一、MySQL啟動方式
|
1 2 3 4 5 |
|
二、MySQL停止
|
1 2 3 4 5 |
|
三、MySQL重啟
|
1 2 3 |
|
四、強制關閉
以上方法都無效的時候，可以通過強行命令：“killall mysql”來關閉MySQL，但是不建議用這樣的方式，因為這種野蠻的方法會強行終止MySQL數據庫服務，有可能導致表損壞……所以自己掂量著用。
Windows下重啟MySQL服務,對于沒裝mysql圖形管理端的用戶來說啟動和停止mysql服務：
…\…\bin>net stop mysql
…\…\bin>net start mysql
卸載PHP
yum remove php
yum remove php*
yum remove php-*
yum remove php7
yum remove php70
yum remove php7.0
yum remove php-common
這才是苦大仇深卸載個干干凈凈= w
默認的版本太低了，手動安裝有一些麻煩，想采用Yum安裝的可以使用下面的方案：
1.檢查當前安裝的PHP包
yum list installed | grep php
如果有安裝的PHP包，先刪除他們
yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-gd.x86_64 php-ldap.x86_64 php-mbstring.x86_64 php-mcrypt.x86_64 php-mysql.x86_64 php-pdo.x86_64
2.Centos 5.X
rpm -Uvh http://mirror.webtatic.com/yum/el5/latest.rpm
CentOs 6.x
rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
CentOs 7.X
rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
如果想刪除上面安裝的包，重新安裝
rpm -qa | grep webstatic
rpm -e 上面搜索到的包即可
3.運行yum install
yum install php55w.x86_64 php55w-cli.x86_64 php55w-common.x86_64 php55w-gd.x86_64 php55w-ldap.x86_64 php55w-mbstring.x86_64 php55w-mcrypt.x86_64 php55w-mysql.x86_64 php55w-pdo.x86_64
yum install php56w.x86_64 php56w-cli.x86_64 php56w-common.x86_64 php56w-gd.x86_64 php56w-ldap.x86_64 php56w-mbstring.x86_64 php56w-mcrypt.x86_64 php56w-mysql.x86_64 php56w-pdo.x86_64
注：如果想升級到5.6把上面的55w換成56w就可以了。
yum install php70w.x86_64 php70w-cli.x86_64 php70w-common.x86_64 php70w-gd.x86_64 php70w-ldap.x86_64 php70w-mbstring.x86_64 php70w-mcrypt.x86_64 php70w-mysql.x86_64 php70w-pdo.x86_64
4.安裝PHP FPM
yum install php55w-fpm
yum install php56w-fpm
yum install php70w-fpm
注：如果想升級到5.6把上面的55w換成56w就可以了。
nginx重啟不了
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
