互聯網 - 大數據

3月 09 週四 201720:23
用php做省份的三級聯動附帶數據庫

文章出處

可以把它做成小插件的形式，以后需要，可以隨時調
來看一下怎么來做
先來寫個div然后，再引入js包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head>
<body>
<div id="sanji">
</div>
</body>
</html>

引入的js文件，取名為sanji.js
然后來看看js文件是怎么寫的

$(document).ready(function(e) {
//向DIV里面扔三個下拉
var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
$("#sanji").html(str);
FillSheng();
FillShi();
FillQu();
//選中項變化 
$("#sheng").change(function(){ 
FillShi();
FillQu();
})
$("#shi").change(function(){
FillQu();
})
});
//填充省的方法
function FillSheng()
{
var pcode = "0001"; //父級代號
 $.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){ //回調函數
var hang = data.split("|"); //根據行與行的分隔符來拆
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); //列與列的分隔符來拆
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //中間顯示地區名稱
 }
$("#sheng").html(str); //把顯示的地區名稱填充進去
 }
});
}
//填充市的方法
function FillShi()
{
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
//填充區的方法
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}

只要寫出一個來，其他兩個和上面一個原理是一樣的
再來看處理頁面，三項用一個處理頁面
看一下處理頁面的代碼

<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

數據庫的地區表是chinastates
根據傳過來的父級代號來查所有數據
最后運行起來的效果是這樣的
來看一下數據庫的內容
數據庫內容很多，三級聯動里的地區名稱都在里面，采用的是代號副代號的方式
比如說北京吧，北京的代號是11，它下面的北京市副代號就11，北京市的主代號是1101，北京市下面的地區副代號就是1101，調地區的時候可以根據主代號查詢和它相同的副代號，就能查詢出來

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(1)

個人分類：生活學習

▲top

3月 09 週四 201720:23
js中常常容易忘記的基本概念

文章出處
javascript組成部分
一個完整的javascript實現應該由三個不同的部分組成：核心（ECMAScript）、文檔對象模型（DOM）、瀏覽器對象模型（BOM） Web瀏覽器只是ECMAScript實現可能的宿主環境之一。宿主環境不僅提供基本的ECMAScript實現，同時也會提供該語言的擴展，以便言語和環境之間對接交互。
ECMAScript語言郵下列組成：語法、類型、語句、關鍵字、保留字、操作符、對象文檔對象模型（DOM）：提供訪問和操作網頁內容的方法和接口瀏覽器對象模型（BOM）提供與瀏覽器交互的方法與接口
javascript基本常識
1：javascirpt是嚴格區分大小寫的。
2：javascript（標識符）命名規則：第一個字符必須是一個字母、下劃線、美元符號，其它字符可以是字母、下劃線、美元符號或數字
3：ECMAScript標識符采用駝峰大小寫格式，也就是第一個字母小寫，剩下的每個單詞的首字母大寫。（但是沒有誰強制要求這個格式）
4：
//單行注釋
/*
*這是多行注釋
*/
5：每條語句最好用一個分號結尾，但是也可以省略分號。
6：
if (test)
alert(test); //有效但容易出錯，最好不要使用
if (test)
{
alert(test);//推薦使用
}
7:var obj; 像這樣未經過初始化的變量會保存一個特殊的值undefined
8:obj=100 這樣雖然有效，但不推薦，這樣相當于聲明了一個全局變量
9：ECMAScript有5種簡單數據類型：Undefined,Null,Boolean,Number和String
　　1種復雜數據類型Object
10:typeof操作符　
var message = 'message';
typeof message
typeof(message)
11：Undefined類型只有一個值，即特殊的undefined
12:
var message;
alert(message)//undefined
alert(age);//報錯啦
13:最好顯示的初始化變量，這樣的話當typeof操作符返回undefined值時，我們就知道被檢測的變量沒有被聲明，而不是尚未初始化
　　因為沒有聲明的變量用typeof操作符就會直接返回undefined
14要將一個值轉換為其對應的Boolean值，可以調用轉型函數Boolean()
15Number類型：八進制字面值的第一位必須是零，十六進制的字面值的前兩位必須是Ox
　　浮點婁可以這樣：var floatNum = .1;但是不推薦這樣使用
　　如果浮點數小數點后面沒有任何數字，那個這個數值就可以被作為整數值來保存，同樣，如果浮點數本身就表示一個整數（如1.0）那么該值也會被轉換為整數
14：Number.MAX_VALUE整數的最大值
　　Number.MIN_VALUE整數的最小值
　　如果計算得到一個超出javascript數值范圍的值，那么這個數值自動轉換為特殊的Infinity,如果某次返回正的或負的Infinity值，那么該值將無法繼續參與下一次計算
　　要想確定一個數值是不是有窮的，可以使用isFinite()函數
　　訪問Number.NEGATIVE_INFINITY和Number.POSITIVE_INFINITY可以得到正和負的Infinity的值，所以其實這兩個屬性分別保存著-Infinity和Infinity
15NaN特點：1任何涉及到NaN的操作都會返回NaN，2NaN與任何值都不相等，其中包括NaN本身
isNaN()這個函數接受一個參數，該參數可以是任何類型，而此函數會幫我們確定這個參數是否“不是數值”
16parseInt能夠各種整數格式
Number(789)//不能轉換789Yun
parseInt("789Yun");
parseInt("0xa313",
16);//有基數設置也可以轉換八進制
parseInt(""); //NaN
parseFloat只解析十進制值，因此它沒有用第二個參數指定基數的用法
parseFloat解析字符串，如果此字符串包含一個可解析為整數的數（沒有小數點或者小數點后面全部都是零） parseFloat()會返回整數
parseFloat("32.32")
17用雙引號表示的字符串和用單引號表示的字符串完全相同，任何字符串長度都可以通過其length屬性取得
　　轉換為字符串方法toString(),數值、布爾值、對象和字符串都有些方法，但null和undefined值沒有此方法
　　toString()如果是數值調用的話，還可以傳遞基數 eg:var a = 123; a.toString(16);
　　在不知道值為null或undefined值時，可以使用轉型函數String()，這個函數能夠將任何類型的值轉換為字符串，String()函數遵循轉換規則：1如果值有toString()方法，則調用該方法（沒有參數）返回相應的結果2如果值是null則返回"null"3如果值為undefined則返回"undefined"
18ECMAScript中的對象其實就是一組數據和功能的集合。在ECMAScript中，如果不能構造函數傳遞參數，則可以省略后面的那一對圓括號
如下所示
var obj = new Object();
var obj = new Object;
19Object的每個實例都具有下列屬性和方法
　　constructor保存著用于創建當前對象的函數
　　hasOwnProperty(propertyName)用于檢查給定的屬性在當前對象實例中（而不是在實例的原型中）是否存在
　　isPrototypeOf(object)用于檢查傳入的對象是否是另一個對象的原型
　　propertyIsEnumerable(propertyName)用于檢查給定的屬性是否能夠使用for-in語句
20with語句：　
with (location) {
var qs = search.substring(1);
var hostName =
hostname;
var url = href;
}
21switch
var num = 25;
switch (true) {
case num < 0: alert('less than 0');
break;
case num >= 0 && num <= 10: alert('between 0 and 10');
break;
case num > 10 && num <= 20: alert('between 10 and 20');
break;
default: alert('more than 20');
}
switch語句在比較值時使用的是全等操作符，因此不會發生類型轉換
22函數中return語句之后的任何代碼都永遠不會執行
　return 語句也可以不帶有任何返回值，這種情況下，函數在停止執行后將返回undefined值　
23通過arguments對象的length屬性可以獲得有多少個參數傳遞給了函數，沒有傳遞值的命名參數將自動被賦予undefined值（ECMAScript中的所有參數傳遞的都是值，不可能通過引用傳遞參數）
24ECMAScript函數沒有重載
25與其它語言不同，ECMAScript沒有為整數和浮點數值分別定義不同的數據類型，Numer類型可用于表示所有數值
26ECMAScript中無須指定函數的返回值，因為任何ECMAScript函數都可以在任何時候返回任何值
27ECMAScript函數中函數參數是以一個包含零或多個值的數組的形式傳遞的
28可以向ECMAScript函數傳遞任意數量的參數，并且可以通過arguments對象來訪問這些參數
在html中使用javascript
script屬性：
charset：表示通過src屬性指定的代碼的字符集
defer:表示腳本可以延遲到文檔完全被解析和顯示之后再執行
包含在script元素內部的javascript代碼將從上到下依次解釋
在javascript代碼的任何地方不要出現“</script>”字符串，因為按照解析嵌入式代碼的規則，當瀏覽器遇到字符串“</script>”時，就會認為那是結束的</script>標簽，而通過把這個字符串分隔為兩部分可解決這個問題
外部javascript文件帶有js擴展名，但這個擴展名不是必需的，因為瀏覽器不會檢查包含javascript的文件的擴展名
帶有src屬性的<script>元素不應該在其<script>標簽與</script>標簽之間再包含額外的javascript代碼
另外通過<script>元素的src屬性還可以包含來自外部域的javascript文件
瀏覽器會按照<script>元素在頁面中出現的先后順序對它們依次進行解析
一般都把全部的javascript引用放在body元素中，放在頁面的內容后面。
<script>標簽定義了defer屬性，表明腳本在掛靠時不會影響頁面的構造，也就是說腳本會被延遲到整個頁面都解析完畢后再運行，因為在<script>元素中設置defer屬性（ defer="defer" ），實際上與把script引用放到頁面最底部的效果是一樣的。（但是現在只有IE和Firefox3.1是目前唯一支持defer屬性的主流瀏覽器）
XHTML（Extensible Hypertext Markup Language）
編寫XHTML代碼的要比編寫html嚴格很多
CData片段是文檔中的一個特殊區域，這個區域中可以包含不需要解析的任何格式的文本內容，因此在在html中可以出現的小于號加上了CData片段后也可以在XHTML文檔中正常運行了
如下所示：

<![CDATA[
function compare(a, b) {
if (a < b) {
alert('A is less than B');
} else {
if (a > b) {
alert('A is greater than B');
} else {
alert('A is equal to B');
}
}
}
]]>

在兼容XHTML的瀏覽器，這個方法可以解決問題，但是實際上，還有不少瀏覽器不兼容XHTML，因為不支持CData片段，再使用javascipt注釋將CData標記注釋掉就行了
如下所示：

//<![CDATA[
function compare(a, b) {
if (a < b) {
alert('A is less than B');
} else {
if (a > b) {
alert('A is greater than B');
} else {
alert('A is equal to B');
}
}
}
//]]>

讓不支持<script>元素的瀏覽器能夠隱藏嵌入的javascript代碼，這個方案就是把javascript代碼包含在一個html注釋中，
如下所示

<!--
function sayHi() {
alert('Hi');
}
//-->

其實作用外部文件比嵌入代碼的優勢主要體現在可維護性及可緩存（如果兩個頁面都作用同一個外部文件的話，那么這個文件只須下載一次）這兩方面
文檔模式：混雜模式與標準模式
<noscript>元素中的內容只有在瀏覽器不支持腳本或者瀏覽器支持腳本但腳本被禁用。瀏覽器支持腳本，也啟用腳本的情況下，不會出現noscript元素中的任何內容
eg:
<noscript>
<p>本頁面需要瀏覽器支持（啟用）JavaScript</p>
</noscript>

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:23
公共事件處理函數js庫

文章出處

var EventUtil = {
/*
*添加事件處理 參數：元素對象 事件類型 處理函數
*/
addHandle: function (element, type, handle) {
//dom2級的事件添加
if (element.addEventListener) {
element.addEventListener(type, handle, false);
} else {
//IE 的事件添加
if (element.attachEvent) {
element.attachEvent('on' + type, handle);
} else {
//給元素特性賦值
element['on' + type] = handle;
}
}
},
/*
*移除事件處理 參數：元素對象 事件類型 處理函數
*/
removeHandle: function (element, type, handle) {
//dom2級的事件移除
if (element.removeEventListener) {
element.removeEventListener(type, handle, false);
} else {
//IE的事件移除
if (element.detachEvent) {
element.detachEvent('on' + type, handle);
} else {
//給元素特性賦值為空對象以移除事件
element['on' + type] = null;
}
}
},
//獲得event對象 IE中以參數event對象傳入 Dom中通過window.event來訪問
getEvent: function (event) {
return event ? event : window.event;
},
//獲得事件的目標 dom中通過event.target獲得 IE中通過event.srcElement
getTarget: function (event) {
return event.target || event.srcElement;
},
//取消事件的默認行為
preventDefault: function (event) {
if (event.preventDefault) {
//Dom 方法
 event.preventDefault();
} else {
//設置IE event.returnValue = false
event.returnValue = false;
}
},
//停止事件冒泡
stopPropagation: function (event) {
//Dom 方法
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;;
}
},
//獲得相關目標對象
getRelatedTarget: function (event) {
//Dom 方法 relatedTarget只對mouseover和mouseout事件才包含值 否則 這個值為null
if (event.relatedTarget) {
return event.relatedTarget;
} else {
//IE
if (event.toElement) {
return event.toElement;
} else {
if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
}
}
},
//獲得鼠標按鍵 0表示左鍵 1表示中間輪 2表示右鍵
getButton: function (event) {
//是否支持Dom鼠標事件
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
},
//獲得字符編碼
getCharCode: function (event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode;
}
}
};

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:23
js實現身份證號碼驗證

文章出處
/*
根據〖中華人民共和國國家標準 GB 11643-1999〗中有關公民身份號碼的規定，公民身份號碼是特征組合碼，由十七位數字本體碼和一位數字校驗碼組成。排列順序從左至右依次為：六位數字地址碼，八位數字出生日期碼，三位數字順序碼和一位數字校驗碼。
地址碼表示編碼對象常住戶口所在縣(市、旗、區)的行政區劃代碼。
出生日期碼表示編碼對象出生的年、月、日，其中年份用四位數字表示，年、月、日之間不用分隔符。
順序碼表示同一地址碼所標識的區域范圍內，對同年、月、日出生的人員編定的順序號。順序碼的奇數分給男性，偶數分給女性。
校驗碼是根據前面十七位數字碼，按照ISO 7064:1983.MOD 11-2校驗碼計算出來的檢驗碼。
出生日期計算方法。
位的身份證編碼首先把出生年擴展為4位，簡單的就是增加一個19或18,這樣就包含了所有1800-1999年出生的人;
年后出生的肯定都是18位的了沒有這個煩惱，至于1800年前出生的,那啥那時應該還沒身份證號這個東東，⊙﹏⊙b汗...
下面是正則表達式:
出生日期1800-2099 (18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])
身份證正則表達式 /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
位校驗規則 6位地址編碼+6位出生日期+3位順序號
位校驗規則 6位地址編碼+8位出生日期+3位順序號+1位校驗位
校驗位規則公式:∑(ai×Wi)(mod 11)……………………………………(1)
公式(1)中：
i----表示號碼字符從由至左包括校驗碼在內的位置序號；
ai----表示第i位置上的號碼字符值；
Wi----示第i位置上的加權因子，其數值依據公式Wi=2^(n-1）(mod 11)計算得出。
i 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1
Wi 7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 1
*/
//身份證號合法性驗證
//支持15位和18位身份證號
//支持地址編碼、出生日期、校驗位驗證
function IdentityCodeValid(code) {
var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",21:"遼寧",22:"吉林",23:"黑龍江 ",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北 ",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏 ",61:"陜西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外 "};
var tip = "";
var pass= true;
if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
tip = "身份證號格式錯誤";
pass = false;
}
else if(!city[code.substr(0,2)]){
tip = "地址編碼錯誤";
pass = false;
}
else{
//18位身份證需要驗證最后一位校驗位
if(code.length == 18){
code = code.split('');
//∑(ai×Wi)(mod 11)
//加權因子
var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
//校驗位
var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
var sum = 0;
var ai = 0;
var wi = 0;
for (var i = 0; i < 17; i++)
{
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
var last = parity[sum % 11];
if(parity[sum % 11] != code[17]){
tip = "校驗位錯誤";
pass =false;
}
}
}
if(!pass) alert(tip);
return pass;
}
var c = '130981199312253466';
var res= IdentityCodeValid(c);

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(10)

個人分類：生活學習

▲top

3月 09 週四 201720:22
成熟法則

文章出處
了解別人，爭取支持
你要想獲得別人的支持，你必須知道他們最重視的是什么？他們有什么信仰和恐懼？你要說什么才可以獲得他們信任？你要駕馭別人，也必須尊重別人的自尊，同時要讓他感到“此事對我有益”。
你要向可信賴、經驗豐富的人學習。例如你找到了一份新工作，就應向一兩位老員工探聽公司操作的方式。他們熟知公司的情況，可以告訴你高層的喜好，甚至告訴你晉升的秘訣。你必須明白自己和同事“為什么”以及“怎樣”做目前的人生感悟工作。你要了解人類的天性，只有這樣，你做的一切才能引起別人的共鳴。
對自己的行為負責
假如你不喜歡目前的工作，假如你活得不快樂，責任在你自己的身上。
只要你承認，目前情況是自己造成的，那么，你就可以分析，自己是怎樣導致如今的局面的。你是否誤信他人，或忘了提出自己的要求，或對自己的要求過低？
明白了自己的責任，你就開竅了，不會再說：“他們為什么這樣對我？”你會說：“我干嗎這樣對待自己？我要怎樣自我改造，才能改變這種局面？”你明白了解決問題要靠自己，就會行動起來改變自己的生活。
正視問題才能解決
假如你不愿意正視問題，就不可能解決問題。你必須切實了解自己的不是，不怕質疑自己的信念與行為。你是不是太懶惰了？太膽小了？你有沒有生活目標？是不是經常對自己失信？你不能一味替自己找借口推卸責任。推卸責任會扼殺夢想，甚至會使你走上絕路。
如果你總是推委、逃避，你就永遠不能正視問題，于是也就不能解決問題。你要承認自己不是完美的，要能夠從經驗中吸取教訓，勇于抉擇，改變不符合理想的現狀。
人之所為，多看回報
你想節食，嘴巴卻忍不住；你想冷靜，卻忍不住發脾氣；你完全不想讓步，最終卻讓步了。這樣的事不斷發生，究竟應該怎樣解釋呢？
假如你想停止某種行為，就必須明確停止這種行為會給你帶來回報。假如你想影響他人的行為，就該先了解他們所求的回報是什么，按他們的心意行事，然后才可以得到你所求的回報。
了解并掌握行為的回報，你就可以控制自己或他人的行為。這個原則可以令你掌控事物的能力大大增加。
行動才有回報
人家怎樣看你，會嘉許還是懲罰你，都取決于你的行為。
換言之，行動才是最重要的。你心里想什么，人家不會在意。無論你有什么思想或大道理，假如不付諸實施，就沒有任何價值。譬如，醫生明知你已氣息奄奄，卻不聞不問，你還是死定了；明知你的婚姻已經出現危機，還不努力補救，婚姻最后一定以離婚收場。你只有切切實實改轅易轍，才能改變生活。
請行動起來，為生活做一些事。這些事可以是健身，可以是重返校園，也可以是尋找新工作，總之，行動會為你的生活帶來新的動力。你會認識新朋友，找到新機會，不久就會發現生活多姿多彩。
不要認命
人生不可能沒有困難和煩惱。有些人可能家庭生活一帆風順，工作上卻不順利；有些人則相反，工作如意，家庭卻一塌糊涂。接受這個事實，你就不會把每個問題都看成是危機，也不會認為自己是人生旅途上的敗將。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:22
javascript表單驗證

文章出處
表單HTML

<form action="" method="post">
<fieldset class="login">
<legend>Login information</legend>
<label for="userName" class="hover">UserName:</label>
<input type="text" id="userName" class="required text" /><br />
<label for="password" class="hover">Password:</label>
<input type="text" id="password" class="required text" /><br />
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="name" class="hover">Name:</label>
<input type="text" id="name" class="required text" /><br />
<label for="email" class="hover">Email:</label>
<input type="text" id="email" class="required text email" /><br />
<label for="date" class="hover">Date:</label>
<input type="text" id="date" class="required text" /><br />
<label for="url" class="hover">Website:</label>
<input type="text" id="url" class="url text" value="http://" /><br />
<label for="phone" class="hover">Phone:</label>
<input type="text" id="phone" class="phone text" /><br />
<label for="age" class="hover">Age:</label>
<input type="checkbox" id="age" name="age" value="yes" /><br />
<input type="submit" value="Submit Form" class="submit" />
</fieldset>
</form>

表單的CSS樣式

 form {
font-family: Arial;
font-size: 14px;
width: 300px;
}
fieldset {
border: 1px solid #ccc;
margin-bottom: 10px;
}
fieldset.login input {
width: 125px;
}
legend {
font-weight: bold;
font-size: 1.1em;
}
label {
display: block;
width: 60px;
text-align: right;
float: left;
padding-right: 10px;
margin: 5px 0;
}
input {
margin: 5px 0;
}
input.text {
padding: 0 0 0 3px;
width: 172px;
}
input.submit {
margin: 15px 0 0 70px;
}
ul.errors {
list-style: none;
background: #ffcece;
padding: 3px;
margin: 3px 0 3px 70px;
font-size: 0.9em;
width: 165px;
}

View Code

表單JavaScript

 var errMsg = {
//檢查特定字段是否必填
 required: {
msg: 'This field is required.',
test: function (obj, load) {
return obj.value.length > 0 && obj.value != obj.defaultValue;
}
},
//確保字段內容是正確的email地址
 email: {
msg: 'Not a valid email address.',
test: function (obj) {//確保有內容的輸入并符合email地址的格式
return !obj.value || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
}
},
//確保字段內容是電話號碼并將其自動格式化
 phone: {
msg: 'Not a valid phone number',
test: function (obj) {
var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
if (m) {
obj.value = "(" + m[1] + ")" + m[2] + "-" + m[3];
return !obj.value || m;
}
}
},
//確保字段內容符合MM/DD/YYYY的時間格式
 date: {
msg: 'Not a valid date.',
test: function (obj) {
return !obj.value || /^\d{2}\/d{2}\/d{2,4}$/.test(obj.value);
}
},
url: {
msg: 'Not a valid URL.',
test: function (obj) {
return !obj.value || obj.value == 'http:://' ||
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
}
};
//隱藏當前正在顯示的任何錯誤信息
function hideErrors(elem) {
var next = elem.nextSibling;//獲取當前字段的下一個元素
if (next && next.nodeName == 'UL' && next.className == 'errors') {//如果下一個元素是ul并有class為errors
elem.parentNode.removeChild(next);//刪掉它
 }
}
//顯示表單內特定字段的錯誤信息
function showErrors(elem, errors) {
var next = elem.nextSibling;//獲取當前字段的下一個元素
if (next && (next.nodeName != 'UL' || next.className != 'errors')) {
next = document.createElement('ul');
next.className = 'errors';
elem.parentNode.insertBefore(next, elem.nextSibling);
}
//有一個包含錯誤的容器引用，我們可以遍歷所有的錯誤信息
for (var i = 0; i < errors.length; i++) {
var li = document.createElement('li');//為每一個錯誤信息創建新的li包裹器
li.innerHTML = errors[i];
next.appendChild(li);//并插入到dom中
 }
}
//驗證表單所有字段的函數
//form參數應是一個表單元素的引用 
//load參數應該是一個布爾值 用以判別驗證函數在頁面加載時執行還是動態執行
function validateForm(form, load) {
var valid = true;
for (var i = 0; i < form.elements.length; i++) {//遍歷表單的所有字段的一個數組
hideErrors(form.elements[i]);//先將所有錯誤信息隱藏
if (!validateField(form.elements[i], load)) {
valid = false;
}
}
return valid;//如果字段是不正確的內容，則返回false,反之則返回true;
 }
//驗證單個字段的內容
function validateField(elem, load) {
var errors = [];
for (var name in errMsg) {
var re = new RegExp("(^|\\s)" + name + "(\\s|$)"); 
if (re.test(elem.className) && !errMsg[name].test(elem, load)) {//如果沒有通過驗證，把錯誤信息增加到列表中
 errors.push(errMsg[name].msg);
}
}
if (errors.length) {//如果存在錯誤信息，則顯示出來
 showErrors(elem, errors);
}
return errors.length > 0;
}
function getInputsByName(name) {
var result = [];//匹配的input元素的數組
result.numChecked = 0;//追蹤被選中元素的數量
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
if (input[i].name == name) {//找出所有指定name的字段
result.push(input[i]);//保存結果
if (input[i].checked) {//記錄被選中字段的數量
result.numChecked++;
}
}
}
return result;//返回匹配的字段集合
 }
window.onload = function () {
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function () {
validateForm(form, 'submit');
return false;
}
}

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(31)

個人分類：生活學習

▲top

3月 09 週四 201720:22
你可能不知道console強大

文章出處
寫在前面
大家都有用過各種類型的瀏覽器，每種瀏覽器都有自己的特色，本人拙見，在我用過的瀏覽器當中，我是最喜歡Chrome的，因為它對于調試腳本及前端設計調試都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的了解，心里難免會想調試的時候用alert不就行了，干嘛還要用console.log這么一長串的字符串來替代alert輸出信息呢，下面我就介紹一些調試的入門技巧，讓你愛上console.log
先的簡單介紹一下chrome的控制臺，打開chrome瀏覽器，按f12就可以輕松的打開控制臺
大家可以看到控制臺里面有一首詩還有其它信息，如果想清空控制臺，可以點擊左上角那個來清空，當然也可以通過在控制臺輸入console.clear()來實現清空控制臺信息。如下圖所示
現在假設一個場景，如果一個數組里面有成百上千的元素，但是你想知道每個元素具體的值，這時候想想如果你用alert那將是多慘的一件事情，因為alert阻斷線程運行，你不點擊alert框的確定按鈕下一個alert就不會出現。
下面我們用console.log來替換，感受一下它的魅力。
看了上面這張圖，是不是認識到log的強大之處了，下面我們來看看console里面具體提供了哪些方法可以供我們平時調試時使用。
1、先說一下源碼定位
大家打開測試網頁看到頁面右下方有一個推薦的圖標嗎？右擊推薦圖標，選擇審查元素，打開谷歌控制臺，如下圖所示
我們現在想知道votePost方法到底在哪？跟著我這樣做，在Console面板里面輸入votePost然后回車
直接點擊上圖標紅的鏈接，控制臺將定位到Sources面板中，展示如下圖所示
大家看了上面這個圖片之后估計頭都要暈了吧，這么多js都整在一行，讓人怎么看呀，不用擔心，按下圖操作即可（也就是點擊中間面板左下方的Pretty print就行了）
這時我們再回到Console面板時會驚奇的發現原來的鏈接后面的1現在變成91了（其實這里的數字1或者91就是代表votePost方法在源碼中的行號）現在看出Pretty print按鈕的強大之處了吧
知道了怎么樣查看某一個按鈕的源碼，那接下來的工作便是調試了，調試第一步需要做的便是設置斷點，其實設置斷點很簡單，點擊一下上圖所示的92即可，這時你會發現92行號旁邊會多了一個圖標，這里解釋一下為什么不在91處設置斷點，你可以試下，事實上根本就沒法在91處上設置斷點，因為它是函數的定義處，所以沒法在此設置斷點。
設置好了斷點后，你就會在右邊Breakpoints方框里看到剛剛設置的斷點。
我們先來介紹一下用到的調試快捷鍵吧（事實上我們也可以不用下表所示的快捷鍵，直接點擊上圖所示右側欄最上層的一排按鈕來進行調試，具體用哪個按鈕，把鼠標放到按鈕上方一會就會顯示它相應的提示）

快捷鍵功能

F8
恢復運行

F10
步過，遇到自定義函數也當成一個語句執行，而不會進入函數內部

F11
步入，遇到自定義函數就跟入到函數內部

Shift + F11
步出，跳出當前自定義函數

其中值得一提的是，當我們點擊“推薦”按鈕進行調試的時候會發現，不管我們是按的F10進行調試還是按F11進行逐步調試，都沒法進行$.ajax函數內部，即使我們在函數內部設置了斷點也沒有辦法進入，這里按F8才是真正起效果的，不信你試試。
當我們在調試的時候，右側Scope Variables里面會顯示當前作用域以及他的父級作用域，以及閉包。你不僅能在右側 Scope Variables(變量作用域) 一欄處看到當前變量，而且還能把鼠標直接移到任意變量上，就可以查看該變量的值。
用圖說話（哈哈）

剛剛我們介紹的只是在html里面能夠看得到它綁定了onclick事件，這樣我們就找到它綁定的js函數，如果它是在jQuery頁面加載完成函數里面綁定的，這時候我們怎么知道它綁定的是哪個js函數呢，如果我們不知道綁定的js函數就更加不用說調試進去了
下面介紹一下如何查看，還是以剛剛那個測試網頁為例子吧，但是這次我們來看“提交評論”作說明吧，
右擊“提交評論”-->審核元素，我們可以清楚的看到在這個按鈕上未綁定任何事件。在Console面板內輸入如下代碼

function lookEvents (elem) {
return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 獲取綁定的事件

如下圖所示：
按照上述介紹的方法定位到具體的blog-common.js里面，找到postComment 然后一層層的找到具體的代碼，再設置斷點就好了。
最后介紹一下一個神器，很好用的debugger
如果你自己寫的代碼，你執行的時候想讓它在某一處停下來，只要寫上的debugger就好了，不信你試試！哈哈
谷歌控制臺Elements面板
要想打開谷歌控制臺，有兩種方式

ctrl+shift+i

f12

大家知道Elements面板最大的功能就是操作屬性和修改html。這里我再說一些大家可能不太熟悉的特性，

拖拽節點, 調整順序

拖拽節點到編輯器

ctrl + z 撤銷修改

這些功能是我覺得最有意思的，你們可以試試哦。
下面來具體說說幾個復雜點的功能
查看元素上綁定的事情

默認會列出 All Nodes, 這些包括代理綁定在該節點的父/祖父節點上的事件, 因為在在冒泡或捕獲階段會經過該節點

Selected Node Only 只會列出當前節點上綁定的事件

每個事件會有對應的幾個屬性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

handler是處理函數, 右鍵可以看到這個函數定義的位置, 一般 js 庫綁定事件會包一層, 所以這里很難找到對應handler

isAtribute 表明事件是否通過 html 屬性(類似onClick)形式綁定的

useCapture 是 addEventListener 的第三個參數, 說明事件是以冒泡還是捕獲順序執行

樣式操作
可以通過 ctrl + z 取消
總況
目前控制臺方法和屬性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
下面我們來一一介紹一下各個方法主要的用途。
一般情況下我們用來輸入信息的方法主要是用到如下四個
console.log
用于輸出普通信息
console.info
用于輸出提示性信息
console.error
用于輸出錯誤信息
console.warn
用于輸出警示信息
console.debug
用于輸出調試信息
用圖來說話
console對象的上面5種方法，都可以使用printf風格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

格式化符號實現的功能

%s
格式化成字符串輸出

%d or %i
格式化成數值輸出

%f
格式化成浮點數輸出

%o
轉化成展開的DOM元素輸出

%O
轉化成JavaScript對象輸出

%c
把字符串按照你提供的樣式格式化后輸入

 console.log("%d年%d月%d日",2011,3,26);
　 console.log("圓周率是%f",3.1415926);

%o占位符，可以用來查看一個對象內部情況

var dog = {};
dog.name = "大毛";
dog.color = "黃色";
console.log("%o", dog);

下面重點說一下console.log的一些技巧
1、重寫console.log 改變輸出文字的樣式

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

輸出的結果如下圖所示：

2、利用控制臺輸出圖片
3、指定輸出文字的樣式
console.dirxml
用來顯示網頁的某個節點（node）所包含的html/xml代碼

<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>

console.group和console.groupEnd
>輸出一組信息的開頭和輸出結束一組輸出信息
看你需求選擇不同的輸出方法來使用，如果上述四個方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出信息。
哈哈，是不是覺得很神奇呀！
console.assert
對輸入的表達式進行斷言，只有表達式為false時，才輸出相應的信息到控制臺
console.count
（這個方法非常實用哦）當你想統計代碼被執行的次數
console.dir
(這個方法是我經常使用的可不知道比for in方便了多少) 直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查對象的方法發展等等
console.time和console.timeEnd
計時開始和計時結束（看了下面的圖你瞬間就感受到它的厲害了）
console.profile和console.profileEnd
配合一起使用來查看CPU使用相關信息
在Profiles面板里面查看就可以看到cpu相關使用信息
console.timeLine和console.timeLineEnd
配合一起記錄一段時間軸
console.trace
堆棧跟蹤相關的調試
上述方法只是我個人理解罷了。如果想查看具體API，可以上官方看看，具體地址為：https://developer.chrome.com/devtools/docs/console-api
下面介紹一下控制臺的一些快捷鍵
方向鍵盤的上下鍵
大家一用就知曉。比如用上鍵就相當于使用上次在控制臺的輸入符號
$_
命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車是一樣的
上面的$_需要領悟其奧義才能使用得當，而$0~$4則代表了最近5個你選擇過的DOM節點。
什么意思？在頁面右擊選擇審查元素，然后在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，如果不夠5個，則返回undefined。
$ // 簡單理解就是 document.querySelector 而已。
$$ // 簡單理解就是 document.querySelectorAll 而已。
$_ // 是上一個表達式的值
$0-$4 // 是最近5個Elements面板選中的DOM元素，待會會講。
dir // 其實就是 console.dir
keys // 取對象的鍵名, 返回鍵名組成的數組
values // 去對象的值, 返回值組成的數組
看一下chrome控制臺一個簡單的操作，如何查看頁面元素，看下圖就知道了
你在控制臺簡單操作一遍就知道了，是不是覺得很簡單！
Chrome 控制臺中原生支持類jQuery的選擇器
也就是說你可以用$加上熟悉的css選擇器來選擇DOM節點
copy
通過此命令可以將在控制臺獲取到的內容復制到剪貼板(如果在elements面板中選中某個節點，也可以直接按ctrl+c執行復制操作)
（哈哈剛剛從控制臺復制的body里面的html可以任意粘貼到哪比如記事本是不是覺得功能很強大）
keys和values
前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組
console.table
monitor & unmonitor
monitor(function)，它接收一個函數名作為參數，比如function a,每次a被執行了，都會在控制臺輸出一條信息，里面包含了函數的名稱a及執行時所傳入的參數。
而unmonitor(function)便是用來停止這一監聽。
看了這張圖，應該明白了，也就是說在monitor和unmonitor中間的代碼，執行的時候會在控制臺輸出一條信息，里面包含了函數的名稱a及執行時所傳入的參數。當解除監視（也就是執行unmonitor時）就不再在控制臺輸出信息了。
Console.log樣式

格式化符號實現的功能

%s
格式化成字符串輸出

%d or %i
格式化成數值輸出

%f
格式化成浮點數輸出

%o
轉化成展開的DOM元素輸出

%O
轉化成JavaScript對象輸出

%c
把字符串按照你提供的樣式格式化后輸入

說了上面一堆公式，還是舉個例子讓你印象深刻一些，哈哈。
在控制臺輸入如下代碼

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

輸出的結果如下圖所示：

如果您覺得本篇博文對您有所收獲，覺得小女子還算用心，請點擊右下角的 [推薦]，謝謝！

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(10)

個人分類：生活學習

▲top

3月 09 週四 201720:22
《此生未完成》讀后感

文章出處
曾幾何時，看了一遍又一遍《此生未完成》，并非因為它是一個將死之人的生命日記，也并非是想提醒自己應該珍惜當下，好好保養身體，或許是于娟的文筆有觸動人心弦的地方，也或許是真心想知道活著的意義吧
書簡介
《此生未完成》是于娟臨時的生命日記。于娟--女，山東濟寧人，1979年4月～2011年4月。2008年，獲復旦大學經濟學博士學位。
于娟在2009年12月于娟確診患乳腺癌后，寫下一年多病中日記，在日記中反思生活細節，在生命的最后日子里，于娟完全放下了生死，放下了名利權情，寫下了這本《此生未完成》
摘錄
當二〇一〇年元旦我被確診為乳腺癌四期，也就是最晚期的時候，我長舒了一口氣，沒有哭，反而發自內心地哈哈大笑。因為這個結果是我預想的所有結果中最好的一個。
我曾經的野心是兩三年搞個副教授來做做，于是開始玩命想發文章搞課題，雖然對實現副教授的目標后該干什么，我非常茫然。為了一個不知道是不是自己人生目標的事情拼了命撲上去，不能不說是一個傻子干的傻事。得了病我才知道，人應該把快樂建立在可持續的長久人生目標上，而不應該只是去看短暫的名利權情。名利權情，沒有一樣是不辛苦的，卻沒有一樣可以帶去。
在生死臨界點的時候，你會發現，任何的加班，給自己太多的壓力，買房買車的需求，這些都是浮云，如果有時間，好好陪陪你的孩子，把買車的錢給父母親買雙鞋子，不要拼命去換什么大房子，和相愛的人在一起，蝸居也溫暖。我還是沒有哭，不是因為堅強，而是因為痛得想不起來哭，那個時候，只能用盡全力頂著。如果稍微分神，我就會痛得暈厥。我不想家人看到我的痛苦。
我曾經的野心是兩三年搞個副教授來做做，于是開始玩命想發文章搞課題，雖然對實現副教授的目標后該干什么，我非常茫然。為了一個不知道是不是自己人生目標的事情拼了命撲上去，不能不說是一個傻子干的傻事。得了病我才知道，人應該把快樂建立在可持續的長久人生目標上，而不應該只是去看短暫的名利權情。名利權情，沒有一樣是不辛苦的，卻沒有一樣可以帶去。
感想
的確，每個人都會有瘋狂拼搏的一段回憶，也曾經因為考試宿不能寐，也曾經想著在短短的幾年里面應該達到什么目標，為此可以說放棄自己的業余生活、放棄與親人相聚的歡愉時刻，回過頭來細細想想這些是否真的值得？
我并非是一個悲觀的，生活中也遇到了很多讓糾心的事，常常為了一些人情事故未能處理好而心神不寧，想想若干年后這些雞毛蒜皮的小事自己是否還能憶起。印象深刻的是為了自考的事情國慶也不回家，那段時間天天忙工作、天天想考試，結果換來了什么，的確我報的每一門考試都過了并且是高分，可是為此引發了皮膚問題，花了兩三個月的調養才稍微好了些許，現在回想起來確實有些如鯁在喉。現在想想放下心靈的包袱，珍惜生命，樂于生活，享樂生活比一切都重要。
的確，在上海每個人壓力都特別大，雖然女生在別人眼中壓力不如男生大，不一定要買車買房，可是我的人生際遇讓我必須得努力奮斗，朋友眼中的我活得一點也不灑脫，說我的生活的絕大部分都是工作，可是我知道我并非是一個工作狂，只是為了心中曾經的誓言。最后我想說我并不會放棄自考，相反從這些事情之后，我會更加平衡自己的生活，在空閑的時候想想哪些是自己特別急切想要追求的自己，抓緊時間著手做，而不要等到臨界點了才會想到臨時抱佛腳。
古時候的人們都會很相信命運，于我，命運全然掌握在自己手上，你的一生應該怎么過或者說你想要自己成為什么樣的人，沒有人幫你規劃，也沒有人告訴你哪樣做是正確的，哪條路是捷徑，包括你父母，這一切都是需要你自己去摸索。每個人的際遇不一樣，或許有些人天生就貌美如花，這樣即使別人無需任何奮斗也可以衣食無憂，但是我們沒法選擇自己的出生，沒法選擇自己的容顏，只能通過自己的后半生去創造自己想要的幸福。
著實，在追求目標的道路上，沒有一樣是不辛苦的，也正是一些使你痛苦的東西才是真正鍛造著你。人生沒有后悔的路，等到已然將死才想到應該好好保養身體，等到虛發花白才想到自己碌碌無為確實已然太晚。為了打翻的牛奶而懊惱已于事無補。在不同的人生階段每個人的心境不一樣，而我想說的是，在追求目標的道路上，我們應該把眼光放長遠一些，平衡自己的生活，不能讓自己虛度也不能讓透支生命。

摘錄
生不如死九死一生死里逃生死死生生之后，我突然覺得一身輕松。不想去控制大局小局，不想去多管閑事淡事，我不再有對手，不再有敵人，我也不再關心誰比誰強，課題也好，任務也罷，暫且放著。世間的一切，隔岸看花、風淡云清。
若論家庭，結婚八年，剛添愛子，昵喚阿爾法。兒子牙牙學語，本來計劃申請哈佛的訪問學者，再去生個女兒，名字叫貝塔。結果貝塔不見，阿爾法也險些成了沒娘的孩子。回望自己的老父老母，他們的獨生女兒終于事業起步、家庭圓滿，本以為可以享受天倫之樂，不想等來的卻是當頭敲暈了的一棒，有白發人送黑發人之虞。若論事業，好不容易本科、碩士、博士、出國，過五關斬六將，工作一年，申請項目無論國際、國家、省、市全部攬入，才有了些風生水起的跡象。猶如鶴之羽翼始豐，剛展翅便被命運掐著脖子按在塵地里。
我不想說我看穿生死，但生死由命，有時候漫想自己能活多久，后事如何，真的不如在活著的時候能幫別人就幫別人一點，能讓大家快樂一點就快樂一點。不得不說，我得癌癥后的日子是我人性最為升華的一段時間。
感想
相信看過于娟《此生未完成》的人無不心酸，作者能在如此心境下還能文筆如此優雅，真心佩服。我有一位朋友看了《此生未完成》之后說"作者及真情與性情，悲情與樂觀，才華與生命，讓我重新審讀人生的意義。"
人生的意義是什么，誰也無法給出一個正確的答案，或許正確的答案也不止一個，但我不得不說珍惜生命，為了自己，也愛自己的人，活在當下，活出幸福的自己。

摘錄
無所謂病痛，人沒有不能承受的痛苦，還活著，我就已經很知足了。
活著就是王道。
感想
看了這兩句話，憂傷之情油然而生，感嘆于作者直面淋漓鮮血的勇氣和樂觀積極的精神。很多東西在將要失去之時，我們才知道它的寶貴。在這世間活著，特別是生活壓力越來越大，人不免會浮躁，有時候難免會有心累的感覺，上次看了一本心靈雞湯類型的書《遇見未來幸福的自己》，瞬間讓自己的心靈得到了舒緩，心累的時候看《此生未完成》，難道不是應該覺得幸福嗎？別人有生之年已經用手指能數得清月份了，而我們還活著，有什么理由去覺得累呢，活著就是最大的幸福呀。
我不得不說珍惜當下。
每當看著這樣面臨死亡人用盡全力讓自己能多留一份美好在世間，我就告訴自己要多努力一點，不要讓自己辜負了自己的生命。作者在書中說"多害怕看到父母白發人送黑發人"，看到這樣的字眼，眼淚就會止不住的往下流，為了父母，為了所有愛我們的人，好好努力，好好保養身體，好好生活。

摘錄
人世間每個人都有自己真正想要的東西。知道自己想要什么是非常幸運的，而能真正在所不惜即便拼命也要盡其所能達到目標，我覺得是幸福的。
感想
一個將死之人能夠在自己生命的最后時刻還能說出“真正在所不惜即便拼命也要盡其所能達到目標，我覺得是幸福的”這樣的話來，我不得不佩服她的漢子氣概，人生是確實不能讓自己在這個世間白白走一趟，所以認清活著的意義比什么多重要，記得有一句話“走錯了方向，停止前進就是進步”，我不想說選擇有多重要，我只想說如果認清的自己的方向，就一定要有一種漢子的氣概，為了目標而奮斗死而無憾的決心。
其實最近一直在寫博客，因為文筆不好，技術能力也不強，寫的博文自我感覺都很一般，但我一直會堅持，因為在我看來，于娟即使已然是博士，可是死后即使他是博士又有什么用呢，唯一有用的就在于她留下的《此生未完成》能夠帶給脆弱異或浮躁的人們堅定的心靈慰藉，所以認準了一件事情，不管多難或者多容易，只要自己認為正確就一定要堅持。
希望自己能堅持自己的夢想，好好加油。
最后也愿天下所有好心人都能平平安安，健健康康，生活的幸福美滿，也愿天下所有的父母能夠健康長壽、笑口常開。（今年一年都沒回家了，是否父母已然華發早生？真的好想爸媽，真的好想說爸媽我愛你們）

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(10)

個人分類：生活學習

▲top

3月 09 週四 201720:22
總結jQuery選擇器

文章出處
基本選擇器
1. id選擇器（指定id元素）
2. class選擇器（遍歷css類元素）
3. element選擇器（遍歷html元素）
4. * 選擇器（遍歷所有元素）
5. 并列選擇器$('p,div').css('margin', '0');
層次選擇器
1. parent > child（直系子元素）
2. prev + next（下一個兄弟元素，等同于next()方法）
3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
過濾選擇器
1. 基本過濾選擇器
——1.1 :first和:last（取第一個元素或最后一個元素）
——1.2 :not（取非元素）
$('div:not(.wrap)').css('color', '#FF0000');
——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）
——1.4 :eq(x) （取指定索引的元素）
——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
　　　　　　　$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');
——1.6 :header（取H1~H6標題元素）
$(':header').css('background', '#EFEFEF');
2. 內容過濾選擇器
——2.1 :contains(text)（取包含text文本的元素）
$('dd:contains("jQuery")').css('color', '#FF0000');
——2.2 :empty（取不包含子元素或文本為空的元素）
$('dd:empty').html('沒有內容');
——2.3 :has(selector)（取選擇器匹配的元素）
$('div:has(span)').css('border', '1px solid #000');
——2.4 :parent（取包含子元素或文本的元素）
$('ol li:parent').css('border', '1px solid #000');
3. 可見性過濾選擇器
——3.1 :hidden（取不可見的元素）
jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。
——3.2 :visible（取可見的元素）
4. 屬性過濾選擇器
——4.1 [attribute]（取擁有attribute屬性的元素）
$('a[title]').css('text-decoration', 'none');
——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等于value或不等于value的元素）
$('a[class=item]').css('color', '#FF99CC');
$('a[class!=item]').css('color', '#FF6600');
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute屬性值以value開始，以value結束，或包含value值）
——4.4 [selector1][selector2]（復合型屬性過濾器，同時滿足多個條件）
5. 子元素過濾選擇器
——5.1 :first-child和:last-child
——5.2 :only-child
當某個元素有且僅有一個子元素時，:only-child才會生效。
——5.3 :nth-child
:nth-child有三種用法：
1) :nth-child(x)，獲取第x個子元素
2) :nth-child(even)和:nth-child(odd)，從1開始，獲取第偶數個元素或第奇數個元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0時就是3n，表示取第3n個元素（n>=0）。實際上xn+y是上面兩種的通項式。（當x=0,y>=0時，等同于:hth-child(x)；當x=2,y=0時，等同于nth-child(even)；當x=2,y=1時，等同于:nth-child(odd)）
6. 表單對象屬性過濾選擇器
——6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范圍包括input, select, textarea。
——6.2 :checked（取選中的單選框或復選框元素）
下面的代碼，更改邊框或背景色僅在IE下有效果，chrome和firefox不會改變，但是alert都會彈出來。
——6.3 :selected（取下拉列表被選中的元素）
表單選擇器
1. :input（取input,textarea,select,button元素）
:input元素這里就不再多說了，前面的一些例子中也已經囊括了。
2. :text（取單行文本框元素）和:password（取密碼框元素）
這兩個選擇器分別和屬性選擇器$('input[type=text]')、$('input[type=password]')等同。
3. :radio（取單選框元素）
:radio選擇器和屬性選擇器$('input[type=radio]')等同
4. :checkbox（取復選框元素）
:checkbox選擇器和屬性選擇器$('input[type=checkbox]')等同
5. :submit（取提交按鈕元素）
:submit選擇器和屬性選擇器$('input[type=submit]')等同
6. :reset（取重置按鈕元素）
:reset選擇器和屬性選擇器$('input[type=reset]')等同
7. :button（取按鈕元素）
:button選擇器和屬性選擇器$('input[type=button]')等同
8. :file（取上傳域元素）
:file選擇器和屬性選擇器$('input[type=file]')等同
9. :hidden（取不可見元素）
:hidden選擇器和屬性選擇器$('input[type=hidden]')等同

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(3)

個人分類：生活學習

▲top

3月 09 週四 201720:22
用css3實現各種圖標效果（1）

文章出處
公共樣式
應該說現在絕大多數公司的項目前端都是一團亂，不僅僅是js寫的沒有任何框架而言，css同樣也是如此，導致項目如果要升級或者說有新的變更維護起來就特別困難。
最近領導決定花大時間整理一下css樣式，用他的一句話來說就是為后來者造福。
首先我們在整理樣式之前，必須得有一個自己團隊的規范。
思考真的很重要，所謂的磨刀不誤砍柴工，事實上也就是說你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再動手，否則就可能做到一半發現這樣不對，然后前面的工夫全白費了，這樣啟不是。。。
前面說了一堆費話，下面就簡單點來介紹一下我整理的圖標（全部用css來實現的）。
css沒有繼承、多態等，所以為了write less ,do more就不得不想盡各種方法（我們自己規定凡是公共的、組件級別的樣式全部以u-開頭）。
我這里因為寫所有標簽的樣式名都是以u-icon開頭，所以寫了如下樣式，這樣的話所有的以u-icon開頭的全部都應用了如下三個樣式，你想如果你有100個u-icon的樣式那就省去了你300行代碼呀！

[class^="u-icon"]
{
display: inline-block;
color: #fff;
vertical-align: middle;
}

手機上的切換標簽
html代碼如下：

 <span class="u-icon-toggle"><i></i></span>
<span class="u-icon-toggle on"><i></i></span>

頁面顯示效果如下：
css樣式代碼：

/*手機上的切換標簽*/
.u-icon-toggle
{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
}
.on.u-icon-toggle, .on .u-icon-toggle/*因為這里可能會在父元素上加on 也可能在子元素上加on 所以*/
{
box-shadow: 0 0 0 1px #4089e8;
background-color: #4089e8;
}
.u-icon-toggle i
{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
-webkit-box-shadow: 0 0 2px #bbb;
border-radius: 100%;
background-color: #fff;
-webkit-transition: 300ms linear;
-webkit-transform: translate3d(0,0,0);
}
.on.u-icon-toggle i, .on .u-icon-toggle i
{
-webkit-transform: translate3d(30px,0,0);
}

中英切換標簽樣式
css樣式代碼：

/*中英切換toggle -*/
.u-icon-toggleEn
{
position: relative;
width: 46px;
height: 22px;
border-radius: 30px;
background-color: #67a5e2;
box-shadow: 0 0 1px 1px #67a5e2;
}
.u-icon-toggleEn i
{
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
-webkit-box-shadow: 0 0 2px #bbb;
border-radius: 100%;
background-color: #fff;
-webkit-transition: 300ms linear;
-webkit-transform: translate3d(0,0,0);
}
.on.u-icon-toggleEn i
{
-webkit-transform: translate3d(23px,0,0);
}
.u-icon-toggleEn .ch, .u-icon-toggleEn .en
{
position: absolute;
font-size: 12px;
z-index: 2;
line-height:22px;
}
.u-icon-toggleEn .ch
{
left: 4px;
color: #67a5e2;
}
.on.u-icon-toggleEn .ch
{
color: #fff;
}
.u-icon-toggleEn .en
{
right: 5px;
color: #fff;
}
.on.u-icon-toggleEn .en
{
color: #67a5e2;
}

html代碼如下：
頁面顯示效果如下：

 <span class='u-icon-toggleEn'><span class='ch'>中</span><span class='en'>英</span><i></i></span>
<span class='u-icon-toggleEn on'><span class='ch'>中</span><span class='en'>英</span><i></i></span>

各種點（空心點、實心點、藍色點、橙色點）
html代碼如下：

 <span class="u-icon-pointB cur"></span>
<span class="u-icon-pointB"></span>
<span class="u-icon-pointO"></span>
<span class="u-icon-pointO cur"></span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-pointB, .u-icon-pointO
{
width: 6px;
height: 6px;
margin: 0 3px;
border-radius: 100%;/*圓角為100%就實現圓的效果*/
box-shadow: 0 0 0 1px #6bb5ff;
}
/*機票篩選界面橙色點icon*/
.u-icon-pointO
{
background-color: #fff;
box-shadow: 0 0 0 1px #ff5d1d;
}
/*藍色點icon*/
.cur.u-icon-pointB,.cur .u-icon-pointB
{
background-color: #6bb5ff;/*如果背景和boder顏色不一致 則為空心圓*/
}
.cur.u-icon-pointO,.cur .u-icon-pointO
{
background-color: #ff5d1d;
}

箭頭
html代碼如下：

 <span class="u-icon-arr"></span>
<span class="u-icon-arr u-icon-arrD"></span>
<span class="u-icon-arr u-icon-arrU"></span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-arr
{
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
margin-top: -2px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;
}
/*箭頭朝底 down*/
.u-icon-arrD
{
-webkit-transform: rotateZ(135deg);
}
/*箭頭朝上 up*/
.u-icon-arrU
{
-webkit-transform: rotateZ(-45deg);
}

航線
html代碼如下：

 <span class="u-icon-line">
<span class="u-icon-lineFltGray"></span>
</span> 
<span class="u-icon-line">
<span class="u-icon-lineFltTransit">經停</span>
</span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-lineFltGray
{
background: url(http://webresource.c-ctrip.com/ResCorpMobile/R1/img/flight-icons.png?20141224) no-repeat 0 -39px/45px 150px;
width: 16px;
height: 16px; 
}
/*航線中中轉icon*/
.u-icon-lineFltTransit
{
position: absolute;
top: 50%;
left: 50%;
width: 24px;
margin-left: -12px;
padding-top: 5px;
color: #2181f7;
font-size: 10px;
text-align: center;
}
.u-icon-lineFltTransit em
{
position: absolute;
top: -16px;
width: 66px;
margin-left: -21px;
color: #666;
}
.u-icon-lineFltTransit::before
{
position: absolute;
top: 0;
left: 50%;
width: 5px;
height: 5px;
margin-top: -2px;
margin-left: -3px;
border: 1px solid #2181f7;
-webkit-border-radius: 5px;
border-radius: 5px;
content: "";
}

兩種不同方式實現的warning
html代碼如下：

 <span class="u-icon-warningO">!</span>
<span class="u-icon-warningB"></span>

頁面顯示效果如下：
css樣式代碼：

/*橙色warning icon*/
.u-icon-warningO
{
position: absolute;
top: 6px;
left: 10px;
width: 16px;
height: 16px;
line-height: 18px;
border-radius: 100%;
background: #ff9000;
font-size: 13px;
font-weight: bold;
text-align: center;
}
/*藍色warning tip icon*/
.u-icon-warningB
{
position: relative;
width: 20px;
height: 20px;
border-color: #ed8b85;
border-radius: 100%;
background-color: #56a2ed;
font-size: 14px;
}
.u-icon-warningB:after
{
position: absolute;
top: 0;
left: 6px;
line-height: 1.5;
font-weight: bold;
font-size: 14px;
content: 'i';
}

大小不一的radio
html代碼如下：

 <span class="u-icon-radioLB on"></span>
<span class="u-icon-radioLB off"></span>
<span class="u-icon-radioSB"></span>
<span class="u-icon-radioLO off"></span>
<span class="u-icon-radioLO on"></span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-radioLB, .u-icon-radioLO,.u-icon-radioSB
{ 
position: relative;
width: 24px;
height: 24px;
border-radius: 24px;
-webkit-border-radius: 24px; 
}
.u-icon-radioSB
{
width: 18px;
height: 18px;
border-radius: 18px; 
}
.u-icon-radioLO
{
right: 1px;
box-shadow: 0 0 1px #aaa;
background-color: #f8f8f8;
}

.on .u-icon-radioLB,.on.u-icon-radioLB,.u-icon-radioSB
{
background: #4288E3;
}
.u-icon-radioLB.off {
background-color: #ECECEC;
}
.u-icon-radioLB.off::after {
border-color: #999;
}
.u-icon-radioLO::before
{
position: absolute;
left: -15px;
top: -10px;
width: 50px;
height: 40px;
content: " ";
}
.on.u-icon-radioLO,.on .u-icon-radioLO
{
width: 24px;
height: 24px;
border-radius: 24px;
box-shadow: none;
background-color: #ff5d1d;
}
.on.u-icon-radioLO::after,.on .u-icon-radioLO::after
{
position: absolute;
top: 3px;
right: 3px;
width: 14px;
height: 7px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg) translate(-3px,1px);
transform: rotate(-45deg) translate(-3px,1px);
content: " ";
}
.u-icon-radioLB::after,.u-icon-radioSB::after
{
position: absolute;
top: 4px;
left: 8px;
width: 6px;
height: 10px;
border-style: solid;
border-color: #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotateZ(45deg);
content: "";
}
.u-icon-radioSB::after
{ 
top: 3px;
left: 6px;
width: 4px;
height: 8px; 
}

各種不同的checkbox
html代碼如下：

 <span class="u-icon-checkboxO_filter"></span>
<span class="u-icon-checkboxO_filter checked"></span>
<span class="u-icon-checkboxO checked"></span>
<span class="u-icon-checkboxO"></span>
<span class="u-icon-checkboxB checked"></span>
<span class="u-icon-checkboxB"></span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-checkboxO
{
position: absolute;
top: 20px;
right: 15px;
width: 14px;
height: 14px;
border: 1px solid #dbdbdb;
content: " ";
}
.checked.u-icon-checkboxO, .u-icon-radioSO.on,.checked .u-icon-checkboxO ,.on .u-icon-radioSO 
{
width: 15px;
height: 15px;
border: none;
background-color: #ff5d1d;
}
/*小的橙色radio*/
.u-icon-radioSO.on,.on .u-icon-radioSO 
{
position: absolute;
top: 20px;
right: 16px;
border-radius: 100%;
}
.checked.u-icon-checkboxO::after, .u-icon-radioSO.on:after,.checked .u-icon-checkboxO::after, .on .u-icon-radioSO:after
{
position: absolute;
content: '';
}
.u-icon-radioSO.on:after,.on .u-icon-radioSO:after
{
left: 4px;
top: 2px;
width: 4px;
height: 7px;
border: 2px solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
}
.u-icon-checkboxO.on::after,.on .u-icon-checkboxO::after
{
width: 9px;
height: 4px;
top: 1px;
right: 0;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-40deg) translate(-3px,1px);
transform: rotate(-40deg) translate(-3px,1px);
}
.u-icon-checkboxB
{
position: relative;
width: 19px;
height: 19px;
border: 1px solid #999; 
}
.u-icon-checkboxB.checked,
.checked .u-icon-checkboxB 
{
border-color: #3e74b9;
}
.u-icon-checkboxB.checked::after,
.checked .u-icon-checkboxB::after
{
position: absolute;
top: 3px;
left: 2px;
width: 12px;
height: 6px;
border: 2px solid #3e74b9;
border-width: 0 0 2px 2px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
content: "";
}
.u-icon-checkboxO_filter
{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #fff;
margin-left: 5px;
vertical-align: text-bottom;
position: relative;
}
.checked.u-icon-checkboxO_filter,.checked .u-icon-checkboxO_filter
{
border-color: #e5a64c;
}
.checked.u-icon-checkboxO_filter::before,.checked .u-icon-checkboxO_filter::before
{
width: 14px;
height: 6px;
content: " ";
display: inline-block;
border-left: 1px solid #e5a64c;
border-bottom: 1px solid #e5a64c;
-webkit-transform: rotate(-40deg) translate(7px,-4px);
transform: rotate(-40deg) translate(7px,-4px);
position: relative;
z-index: 2;
}
.checked.u-icon-checkboxO_filter::after,.checked .u-icon-checkboxO_filter::after
{
content: " ";
width: 4px;
height: 9px;
display: inline-block;
background-color: #3b4b58;
position: absolute;
top: -1px;
right: -1px;
}

詳情（也就是三橫線）
html代碼如下：

<span class="u-icon-detail"><i></i></span>

頁面顯示效果如下：
css樣式代碼：

.u-icon-detail
{
width: 12px;
height: 10px;
padding: 19px 10px;
}
.u-icon-detail i
{
display: block;
position: relative;
width: 12px;
height: 2px;
background-color: #ffa124;
}
.u-icon-detail i:before
{
position: absolute;
top: 4px;
width: 12px;
height: 2px;
background-color: #ffa124;
content: '';
}
.u-icon-detail i:after
{
position: absolute;
top: 8px;
width: 7px;
height: 2px;
background-color: #ffa124;
content: '';
}

未完待續（如果大家有更好的方法來實現，不用圖片，可以麻煩與我交流一下，謝謝！）
如果您覺得本篇博文對您有所收獲，覺得小女子還算用心，請點擊右下角的 [推薦]，謝謝！

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

«1 ...242526 230 »

pop-under

參觀人氣

本日人氣：
累積人氣：

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

用php做省份的三級聯動附帶數據庫

js中常常容易忘記的基本概念

公共事件處理函數js庫

js實現身份證號碼驗證

成熟法則

javascript表單驗證

你可能不知道console強大

《此生未完成》讀后感

總結jQuery選擇器

用css3實現各種圖標效果（1）

pop-under

參觀人氣

線上人數

Marquee

最新文章

熱門文章

文章分類

最新留言

文章搜尋

文章精選

誰來我家

Live Traffic Feed