整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          ThinkPHP之去掉文章中的所有HTML標簽并截取部分內容作為簡介

          了讓初學者更容易理解,本文寫的比較詳細,所以如果你已是技術大拿,請直接繞過,以免浪費你的寶貴時間,謝謝。

          相信現在很多網站都有文章功能,有文章就基本上少不了要有個列表頁,網頁設計師們對文章列表頁的設計也是五花八門,各有各的創意,那我們就拿ThinkPHP旗下的極思維平臺的列表頁來說,極思維的目前的列表頁是這樣的:

          大家可以看到,它的布局是塊形式展現,每篇文章都是固定的布局,圖片,標題,簡介,如果說每篇文章在發布的時候都要單獨的寫個簡介,單獨上傳個封面圖,對編輯者來說就有些麻煩了,那我們就可以通過程序讓它自動去抓取封面和簡介,自動抓取縮略圖我在之前的文章有講過,大家可以去找下我之前的《ThinkPHP之自動獲取文章內容中的第一張圖片做為縮略圖》這篇文章,今天我們主要講如何自動抓取文章的部分內容作為文章的簡介。

          我們先來分析一下功能的實現原理,所謂簡介,就是簡單的說明一下這篇文章的主要內容,不涉及到排版,所以我們只需要純文字,那么問題來了,之前我們在抓取縮略圖的文章中我們也有說到,文章內容是由編輯器進行排版的,既然有排版樣式,就必定要有HTML樣式,只要保留文字就得把所有的HTML標簽都去掉,那怎么去掉呢?

          不用急,PHP有個專門去掉HTML的函數,這個函數就是 strip_tags ,我們先來看一下這個函數是什么樣的:

          在以上代碼中可以看到,內容中有個 <b> 標簽,<b> 標簽的作用就是字體加粗,我們運行一下實例看下:

          可以很明顯的看到使用了 strip_tags 函數和沒使用 strip_tags 函數的區別,那是不是直接在ThinkPHP中用這個函數就夠了呢,寫過文章的人都知道,文章會涉及到換行、空格等格式,strip_tags 函數只能去掉HTML標簽,并不能去掉換行、空格等格式,那么怎么樣才能去掉換行和空格呢,別擔心,強大的PHP也有函數來處理這些東西的,PHP中有個正則替換函數叫做 ereg_replace ,這個函數可以把指定的字符換成我們想要的字符,那么我們的邏輯代碼就可以這樣寫:

          從上面的邏輯代碼中,我們可以看到替換換行符中處理了三次替換,這是為什么呢,因為現在服務器系統有很多種,最常用的就有windows、linux兩種系統,這兩種系統的換行符是不同的,所以為了兼容不同的服務器,我們就多替換幾次,其中 \r\n 是替換 linux 和 unix 系統的換行符,\n 是替換 windows 系統的換行符,\r 是替換蘋果系統的換行符的。

          處理好了HTML之后,接下來我們就要截取內容了,因為文章字數有多有少,既然是簡介,那我們肯定就只要截取一小段文字了,比如只要50個字或者100個字這樣,因為編程基本都是用英文編寫的,對中文的識別較差,所以在編程計算長度時,一個中文漢字是算兩個字符的,所以如果我們要截取50個中文的話,截取長度就是乘以二,那就是100了,其實這都不算什么問題,但是在實際過程中,按這樣的方式去截取的話,遇到文章包含中英文的時候就可能會出現亂碼的情況,為了避免出現亂碼,我們可以用一個非PHP核心函數 mb_strlen 來解決,為什么說 mb_strlen 是非PHP核心函數呢,因為在使用 mb_strlen 函數前需要確保在 php.ini 中有加載 php_mbstring.dll,要不然就會出現 未定義函數 的問題,那我們就來把上面的代碼改進一下,加上截取字數的功能,得到代碼如下:

          然后,我們以ThinkPHP3.2為例,把上面的自定義函數方法添加到ThinkPHP框架中核心公共函數目錄(Common)里的 functions.php 文件的最后面即可。

          調用方法為:{$vo.content|cutstr_html=###,100}

          上面調用方法中的 ### 是表示文章內容,100為要截取的字數長度。

          謝謝你的閱讀,如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我,我會定期回復,碼農劉小橋與你一起學習,共同進步。

          、什么是爬蟲?

          網絡爬蟲(又被稱為網頁蜘蛛,網絡機器人,在FOAF社區中間,更經常的稱為網頁追逐者),是一種按照一定的規則,自動地抓取萬維網信息的程序或者腳本。另外一些不常使用的名字還有螞蟻、自動索引、模擬程序或者蠕蟲。

          其實通俗的講就是通過程序獲取web頁面上自己想要的數據,也就是自動抓取數據。

          你可以爬去妹子的圖片,爬取自己想看看的視頻。。等等你想要爬取的數據,只要你能通過瀏覽器訪問的數據都可以通過爬蟲獲取

          二、爬蟲的本質

          模擬瀏覽器打開網頁,獲取網頁中我們想要的那部分數據

          瀏覽器打開網頁的過程:
          當你在瀏覽器中輸入地址后,經過DNS服務器找到服務器主機,向服務器發送一個請求,服務器經過解析后發送給用戶瀏覽器結果,包括html,js,css等文件內容,瀏覽器解析出來最后呈現給用戶在瀏覽器上看到的結果

          所以用戶看到的瀏覽器的結果就是由HTML代碼構成的,我們爬蟲就是為了獲取這些內容,通過分析和過濾html代碼,從中獲取我們想要資源(文本,圖片,視頻…)

          三、爬蟲的基本流程

          發起請求
          通過HTTP庫向目標站點發起請求,也就是發送一個Request,請求可以包含額外的header等信息,等待服務器響應

          獲取響應內容
          如果服務器能正常響應,會得到一個Response,Response的內容便是所要獲取的頁面內容,類型可能是HTML,Json字符串,二進制數據(圖片或者視頻)等類型

          解析內容
          得到的內容可能是HTML,可以用正則表達式,頁面解析庫進行解析,可能是Json,可以直接轉換為Json對象解析,可能是二進制數據,可以做保存或者進一步的處理

          保存數據
          保存形式多樣,可以存為文本,也可以保存到數據庫,或者保存特定格式的文件

          四、什么是Requests

          Requests是用python語言基于urllib編寫的,采用的是Apache2 Licensed開源協議的HTTP庫
          如果你看過上篇文章關于urllib庫的使用,你會發現,其實urllib還是非常不方便的,而Requests它會比urllib更加方便,可以節約我們大量的工作。(用了requests之后,你基本都不愿意用urllib了)一句話,requests是python實現的最簡單易用的HTTP庫,建議爬蟲使用requests庫。

          默認安裝好python之后,是沒有安裝requests模塊的,需要單獨通過pip安裝

          五、Requests 庫的基礎知識


          Requests 庫的7個主要方法

          我們通過調用Request庫中的方法,得到返回的對象。其中包括兩個對象,request對象和response對象。

          request對象就是我們要請求的url,response對象是返回的內容,如圖:


          Request庫的兩個重要對像

          六、Requests的安裝

          1.強烈建議大家使用pip進行安裝:pip insrall requests

          2.Pycharm安裝:file-》default settings-》project interpreter-》搜索requests-》install package-》ok

          七、Requests庫實的操作例

          1、京東商品的爬取–普通爬取框架

          import requests

          url = "https://item.jd.com/2967929.html"

          try:

          r = requests.get(url)

          r.raise_for_status()

          r.encoding = r.apparent_encoding

          print(r.text[:1000])

          except:

          print("爬取失敗!")

          2、亞馬遜商品的爬取--通過修改headers字段,模擬瀏覽器向網站發起請求

          import requests

          url="https://www.amazon.cn/gp/product/B01M8L5Z3Y"

          try:

          kv = {'user-agent':'Mozilla/5.0'}

          r=requests.get(url,headers=kv)

          r.raise_for_status()

          r.encoding=r.apparent_encoding

          print(r.status_code)

          print(r.text[:1000])

          except:

          print("爬取失敗")

          3、百度/360搜索關鍵詞提交--修改params參數提交關鍵詞

          百度的關鍵詞接口:http://www.baidu.com/s?wd=keyword

          360的關鍵詞接口:http://www.so.com/s?q=keyword

          import requests

          url="http://www.baidu.com/s"

          try:

          kv={'wd':'Python'}

          r=requests.get(url,params=kv)

          print(r.request.url)

          r.raise_for_status()

          print(len(r.text))

          print(r.text[500:5000])

          except:

          print("爬取失敗")

          4、網絡圖片的爬取和存儲--結合os庫和文件操作的使用

          import requests

          import os

          url="http://tc.sinaimg.cn/maxwidth.800/tc.service.weibo.com/p3_pstatp_com/6da229b421faf86ca9ba406190b6f06e.jpg"

          root="D://pics//"

          path=root + url.split('/')[-1]

          try:

          if not os.path.exists(root):

          os.mkdir(root)

          if not os.path.exists(path):

          r = requests.get(url)

          with open(path, 'wb') as f:

          f.write(r.content)

          f.close()

          print("文件保存成功")

          else:

          print("文件已存在")

          except:

          print("爬取失敗")

          最后:異常處理

          在你不確定會發生什么錯誤時,盡量使用try...except來捕獲異常所有的requests exception:

          import requests

          from requests.exceptions import ReadTimeout,HTTPError,RequestException

          try:

          response = requests.get('http://www.baidu.com',timeout=0.5)

          print(response.status_code)

          except ReadTimeout:

          print('timeout')

          except HTTPError:

          print('httperror')

          except RequestException:

          print('reqerror')

          最后,小編想說:我是一名python開發工程師,
          整理了一套最新的python系統學習教程,
          想要這些資料的可以關注私信小編“01”即可(免費分享哦)希望能對你有所幫助

          者:咚子,來自:http://dzblog.cn/article/5a6f48afad4db304be1e7a5f

          JavaScript

          1. type 類型判斷

          isString (o) { //是否字符串
           return Object.prototype.toString.call(o).slice(8, -1) === 'String'
          }
          isNumber (o) { //是否數字
           return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
          }
          isObj (o) { //是否對象
           return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
          }
          isArray (o) { //是否數組
           return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
          }
          isDate (o) { //是否時間
           return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
          }
          isBoolean (o) { //是否boolean
           return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
          }
          isFunction (o) { //是否函數
           return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
          }
          isNull (o) { //是否為null
           return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
          }
          isUndefined (o) { //是否undefined
           return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
          }
          isFalse (o) {
           if (o == '' || o == undefined || o == null || o == 'null' || o == 'undefined' || o == 0 || o == false || o == NaN) return true
           return false
          }
          isTrue (o) {
           return !this.isFalse(o)
          }
          isIos () {
           var u = navigator.userAgent;
           if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機
           // return "Android";
           return false
           } else if (u.indexOf('iPhone') > -1) {//蘋果手機
           // return "iPhone";
           return true
           } else if (u.indexOf('iPad') > -1) {//iPad
           // return "iPad";
           return false
           } else if (u.indexOf('Windows Phone') > -1) {//winphone手機
           // return "Windows Phone";
           return false
           }else{
           return false
           }
          }
          isPC () { //是否為PC端
           var userAgentInfo = navigator.userAgent;
           var Agents = ["Android", "iPhone",
           "SymbianOS", "Windows Phone",
           "iPad", "iPod"];
           var flag = true;
           for (var v = 0; v < Agents.length; v++) {
           if (userAgentInfo.indexOf(Agents[v]) > 0) {
           flag = false;
           break;
           }
           }
           return flag;
          }
          browserType(){
           var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
           var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
           var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器
           var isEdge = userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge瀏覽器
           var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
           var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器
           var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判斷Chrome瀏覽器
           if (isIE) {
           var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
           reIE.test(userAgent);
           var fIEVersion = parseFloat(RegExp["$1"]);
           if(fIEVersion == 7) return "IE7"
           else if(fIEVersion == 8) return "IE8";
           else if(fIEVersion == 9) return "IE9";
           else if(fIEVersion == 10) return "IE10";
           else if(fIEVersion == 11) return "IE11";
           else return "IE7以下"http://IE版本過低
           }
           if (isFF) return "FF";
           if (isOpera) return "Opera";
           if (isEdge) return "Edge";
           if (isSafari) return "Safari";
           if (isChrome) return "Chrome";
          }
          checkStr (str, type) {
           switch (type) {
           case 'phone': //手機號碼
           return /^1[3|4|5|6|7|8][0-9]{9}$/.test(str);
           case 'tel': //座機
           return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
           case 'card': //身份證
           return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
           case 'pwd': //密碼以字母開頭,長度在6~18之間,只能包含字母、數字和下劃線
           return /^[a-zA-Z]\w{5,17}$/.test(str)
           case 'postal': //郵政編碼
           return /[1-9]\d{5}(?!\d)/.test(str);
           case 'QQ': //QQ號
           return /^[1-9][0-9]{4,9}$/.test(str);
           case 'email': //郵箱
           return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
           case 'money': //金額(小數點2位)
           return /^\d*(?:\.\d{0,2})?$/.test(str);
           case 'URL': //網址
           return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
           case 'IP': //IP
           return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
           case 'date': //日期時間
           return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
           case 'number': //數字
           return /^[0-9]$/.test(str);
           case 'english': //英文
           return /^[a-zA-Z]+$/.test(str);
           case 'chinese': //中文
           return /^[\u4E00-\u9FA5]+$/.test(str);
           case 'lower': //小寫
           return /^[a-z]+$/.test(str);
           case 'upper': //大寫
           return /^[A-Z]+$/.test(str);
           case 'HTML': //HTML標記
           return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
           default:
           return true;
           }
          }
          // 嚴格的身份證校驗
          isCardID(sId) {
           if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
           alert('你輸入的身份證長度或格式錯誤')
           return false
           }
           //身份證城市
           var aCity={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:"國外"};
           if(!aCity[parseInt(sId.substr(0,2))]) { 
           alert('你的身份證地區非法')
           return false
           }
           // 出生日期驗證
           var sBirthday=(sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2))).replace(/-/g,"/"),
           d = new Date(sBirthday)
           if(sBirthday != (d.getFullYear()+"/"+ (d.getMonth()+1) + "/" + d.getDate())) {
           alert('身份證上的出生日期非法')
           return false
           }
           // 身份證號碼校驗
           var sum = 0,
           weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
           codes = "10X98765432"
           for (var i = 0; i < sId.length - 1; i++) {
           sum += sId[i] * weights[i];
           }
           var last = codes[sum % 11]; //計算出來的最后一位身份證號碼
           if (sId[sId.length-1] != last) { 
           alert('你輸入的身份證號非法')
           return false
           }
           return true
          }
          }
          

          2. Date

          /**
           * 格式化時間
           * 
           * @param {time} 時間
           * @param {cFormat} 格式
           * @return {String} 字符串
           *
           * @example formatTime('2018-1-29', '{y}/{m}/dxt79x9 {h}:{i}:{s}') // -> 2018/01/29 00:00:00
           */
          formatTime(time, cFormat) {
           if (arguments.length === 0) return null
           if ((time + '').length === 10) {
           time = +time * 1000
           }
           var format = cFormat || '{y}-{m}-n7zxbhx {h}:{i}:{s}', date
           if (typeof time === 'object') {
           date = time
           } else {
           date = new Date(time)
           }
           var formatObj = {
           y: date.getFullYear(),
           m: date.getMonth() + 1,
           d: date.getDate(),
           h: date.getHours(),
           i: date.getMinutes(),
           s: date.getSeconds(),
           a: date.getDay()
           }
           var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
           var value = formatObj[key]
           if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
           if (result.length > 0 && value < 10) {
           value = '0' + value
           }
           return value || 0
           })
           return time_str
          }
          /**
           * 返回指定長度的月份集合
           * 
           * @param {time} 時間
           * @param {len} 長度
           * @param {direction} 方向: 1: 前幾個月; 2: 后幾個月; 3:前后幾個月 默認 3
           * @return {Array} 數組
           * 
           * @example getMonths('2018-1-29', 6, 1) // -> ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]
           */
          getMonths(time, len, direction) {
           var mm = new Date(time).getMonth(),
           yy = new Date(time).getFullYear(),
           direction = isNaN(direction) ? 3 : direction,
           index = mm;
           var cutMonth = function(index) {
           if ( index <= len && index >= -len) {
           return direction === 1 ? formatPre(index).concat(cutMonth(++index)):
           direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))
           }
           return []
           }
           var formatNext = function(i) {
           var y = Math.floor(i/12),
           m = i%12
           return [yy+y + '-' + (m+1)]
           }
           var formatPre = function(i) {
           var y = Math.ceil(i/12),
           m = i%12
           m = m===0 ? 12 : m
           return [yy-y + '-' + (13 - m)]
           }
           var formatCurr = function(i) {
           var y = Math.floor(i/12),
           yNext = Math.ceil(i/12),
           m = i%12,
           mNext = m===0 ? 12 : m
           return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)]
           }
           // 數組去重
           var unique = function(arr) {
           if ( Array.hasOwnProperty('from') ) {
           return Array.from(new Set(arr));
           }else{
           var n = {},r=[]; 
           for(var i = 0; i < arr.length; i++){
           if (!n[arr[i]]){
           n[arr[i]] = true; 
           r.push(arr[i]);
           }
           }
           return r;
           }
           }
           return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){
           return new Date(t1).getTime() - new Date(t2).getTime()
           }))
          }
          /**
           * 返回指定長度的天數集合
           * 
           * @param {time} 時間
           * @param {len} 長度
           * @param {direction} 方向: 1: 前幾天; 2: 后幾天; 3:前后幾天 默認 3
           * @return {Array} 數組
           *
           * @example date.getDays('2018-1-29', 6) // -> ["2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"]
           */
          getDays(time, len, diretion) {
           var tt = new Date(time)
           var getDay = function(day) {
           var t = new Date(time)
           t.setDate(t.getDate() + day)
           var m = t.getMonth()+1
           return t.getFullYear()+'-'+m+'-'+t.getDate()
           }
           var arr = []
           if (diretion === 1) {
           for (var i = 1; i <= len; i++) {
           arr.unshift(getDay(-i))
           }
           }else if(diretion === 2) {
           for (var i = 1; i <= len; i++) {
           arr.push(getDay(i))
           }
           }else {
           for (var i = 1; i <= len; i++) {
           arr.unshift(getDay(-i))
           }
           arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())
           for (var i = 1; i <= len; i++) {
           arr.push(getDay(i))
           }
           }
           return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) : 
           diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr
          }
          /**
           * @param {s} 秒數
           * @return {String} 字符串 
           *
           * @example formatHMS(3610) // -> 1h0m10s
           */
          formatHMS (s) {
           var str = ''
           if (s > 3600) {
           str = Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s'
           }else if(s > 60) {
           str = Math.floor(s/60)+'m'+s%60+'s'
           }else{
           str = s%60+'s'
           }
           return str
          }
          /*獲取某月有多少天*/
          getMonthOfDay (time) {
           var date = new Date(time)
           var year = date.getFullYear()
           var mouth = date.getMonth() + 1
           var days
           //當月份為二月時,根據閏年還是非閏年判斷天數
           if (mouth == 2) {
           days = year % 4 == 0 ? 29 : 28
           } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
           //月份為:1,3,5,7,8,10,12 時,為大月.則天數為31;
           days = 31
           } else {
           //其他月份,天數為:30.
           days = 30
           }
           return days
          }
          /*獲取某年有多少天*/
          getYearOfDay (time) {
           var firstDayYear = this.getFirstDayOfYear(time);
           var lastDayYear = this.getLastDayOfYear(time);
           var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000;
           return Math.ceil(numSecond/(24*3600));
          }
          /*獲取某年的第一天*/
          getFirstDayOfYear (time) {
           var year = new Date(time).getFullYear();
           return year + "-01-01 00:00:00";
          }
          /*獲取某年最后一天*/
          getLastDayOfYear (time) {
           var year = new Date(time).getFullYear();
           var dateString = year + "-12-01 00:00:00";
           var endDay = this.getMonthOfDay(dateString);
           return year + "-12-" + endDay + " 23:59:59";
          }
          /*獲取某個日期是當年中的第幾天*/
          getDayOfYear (time) {
           var firstDayYear = this.getFirstDayOfYear(time);
           var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;
           return Math.ceil(numSecond/(24*3600));
          }
          /*獲取某個日期在這一年的第幾周*/
          getDayOfYearWeek (time) {
           var numdays = this.getDayOfYear(time);
           return Math.ceil(numdays / 7);
          }
          

          3. Array

          /*判斷一個元素是否在數組中*/
          contains (arr, val) {
           return arr.indexOf(val) != -1 ? true : false;
          }
          /**
           * @param {arr} 數組
           * @param {fn} 回調函數
           * @return {undefined}
           */
          each (arr, fn) {
           fn = fn || Function;
           var a = [];
           var args = Array.prototype.slice.call(arguments, 1);
           for(var i = 0; i < arr.length; i++) {
           var res = fn.apply(arr, [arr[i], i].concat(args));
           if(res != null) a.push(res);
           }
          }
          /**
           * @param {arr} 數組
           * @param {fn} 回調函數
           * @param {thisObj} this指向
           * @return {Array} 
           */
          map (arr, fn, thisObj) {
           var scope = thisObj || window;
           var a = [];
           for(var i = 0, j = arr.length; i < j; ++i) {
           var res = fn.call(scope, arr[i], i, this);
           if(res != null) a.push(res);
           }
           return a;
          }
          /**
           * @param {arr} 數組
           * @param {type} 1:從小到大 2:從大到小 3:隨機
           * @return {Array}
           */
          sort (arr, type = 1) {
           return arr.sort( (a, b) => {
           switch(type) {
           case 1:
           return a - b;
           case 2:
           return b - a;
           case 3:
           return Math.random() - 0.5;
           default:
           return arr;
           }
           })
          }
          /*去重*/
          unique (arr) {
           if ( Array.hasOwnProperty('from') ) {
           return Array.from(new Set(arr));
           }else{
           var n = {},r=[]; 
           for(var i = 0; i < arr.length; i++){
           if (!n[arr[i]]){
           n[arr[i]] = true; 
           r.push(arr[i]);
           }
           }
           return r;
           }
          }
          /*求兩個集合的并集*/
          union (a, b) {
           var newArr = a.concat(b);
           return this.unique(newArr);
          }
          /*求兩個集合的交集*/
          intersect (a, b) {
           var _this = this;
           a = this.unique(a);
           return this.map(a, function(o) {
           return _this.contains(b, o) ? o : null;
           });
          }
          /*刪除其中一個元素*/
          remove (arr, ele) {
           var index = arr.indexOf(ele);
           if(index > -1) {
           arr.splice(index, 1);
           }
           return arr;
          }
          /*將類數組轉換為數組的方法*/
          formArray (ary) {
           var arr = [];
           if(Array.isArray(ary)) {
           arr = ary;
           } else {
           arr = Array.prototype.slice.call(ary);
           };
           return arr;
          }
          /*最大值*/
          max (arr) {
           return Math.max.apply(null, arr);
          }
          /*最小值*/
          min (arr) {
           return Math.min.apply(null, arr);
          }
          /*求和*/
          sum (arr) {
           return arr.reduce( (pre, cur) => {
           return pre + cur
           })
          }
          /*平均值*/
          average (arr) {
           return this.sum(arr)/arr.length
          }
          

          4. String 字符串操作

          /**
           * 去除空格
           * @param {str}
           * @param {type} 
           * type: 1-所有空格 2-前后空格 3-前空格 4-后空格
           * @return {String}
           */
          trim (str, type) {
           type = type || 1
           switch (type) {
           case 1:
           return str.replace(/\s+/g, "");
           case 2:
           return str.replace(/(^\s*)|(\s*$)/g, "");
           case 3:
           return str.replace(/(^\s*)/g, "");
           case 4:
           return str.replace(/(\s*$)/g, "");
           default:
           return str;
           }
          }
          /**
           * @param {str} 
           * @param {type}
           * type: 1:首字母大寫 2:首頁母小寫 3:大小寫轉換 4:全部大寫 5:全部小寫
           * @return {String}
           */
          changeCase (str, type) {
           type = type || 4
           switch (type) {
           case 1:
           return str.replace(/\b\w+\b/g, function (word) {
           return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
           });
           case 2:
           return str.replace(/\b\w+\b/g, function (word) {
           return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
           });
           case 3:
           return str.split('').map( function(word){
           if (/[a-z]/.test(word)) {
           return word.toUpperCase();
           }else{
           return word.toLowerCase()
           }
           }).join('')
           case 4:
           return str.toUpperCase();
           case 5:
           return str.toLowerCase();
           default:
           return str;
           }
          }
          /*
           檢測密碼強度
          */
          checkPwd (str) {
           var Lv = 0;
           if (str.length < 6) {
           return Lv
           }
           if (/[0-9]/.test(str)) {
           Lv++
           }
           if (/[a-z]/.test(str)) {
           Lv++
           }
           if (/[A-Z]/.test(str)) {
           Lv++
           }
           if (/[\.|-|_]/.test(str)) {
           Lv++
           }
           return Lv;
          }
          /*過濾html代碼(把<>轉換)*/
          filterTag (str) {
           str = str.replace(/&/ig, "&");
           str = str.replace(/</ig, "<");
           str = str.replace(/>/ig, ">");
           str = str.replace(" ", " ");
           return str;
          }
          

          5. Number

          /*隨機數范圍*/
          random (min, max) {
           if (arguments.length === 2) {
           return Math.floor(min + Math.random() * ( (max+1) - min ))
           }else{
           return null;
           }
          }
          /*將阿拉伯數字翻譯成中文的大寫數字*/
          numberToChinese (num) {
           var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
           var BB = new Array("", "十", "百", "仟", "萬", "億", "點", "");
           var a = ("" + num).replace(/(^0*)/g, "").split("."),
           k = 0,
           re = "";
           for(var i = a[0].length - 1; i >= 0; i--) {
           switch(k) {
           case 0:
           re = BB[7] + re;
           break;
           case 4:
           if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
           .test(a[0]))
           re = BB[4] + re;
           break;
           case 8:
           re = BB[5] + re;
           BB[7] = BB[5];
           k = 0;
           break;
           }
           if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
           re = AA[0] + re;
           if(a[0].charAt(i) != 0)
           re = AA[a[0].charAt(i)] + BB[k % 4] + re;
           k++;
           }
           if(a.length > 1) // 加上小數部分(如果有小數部分)
           {
           re += BB[6];
           for(var i = 0; i < a[1].length; i++)
           re += AA[a[1].charAt(i)];
           }
           if(re == '一十')
           re = "十";
           if(re.match(/^一/) && re.length == 3)
           re = re.replace("一", "");
           return re;
          }
          /*將數字轉換為大寫金額*/
          changeToChinese (Num) {
           //判斷如果傳遞進來的不是字符的話轉換為字符
           if(typeof Num == "number") {
           Num = new String(Num);
           };
           Num = Num.replace(/,/g, "") //替換tomoney()中的“,”
           Num = Num.replace(/ /g, "") //替換tomoney()中的空格
           Num = Num.replace(/¥/g, "") //替換掉可能出現的¥字符
           if(isNaN(Num)) { //驗證輸入的字符是否為數字
           //alert("請檢查小寫金額是否正確");
           return "";
           };
           //字符處理完畢后開始轉換,采用前后兩部分分別轉換
           var part = String(Num).split(".");
           var newchar = "";
           //小數點前進行轉化
           for(var i = part[0].length - 1; i >= 0; i--) {
           if(part[0].length > 10) {
           return "";
           //若數量超過拾億單位,提示
           }
           var tmpnewchar = ""
           var perchar = part[0].charAt(i);
           switch(perchar) {
           case "0":
           tmpnewchar = "零" + tmpnewchar;
           break;
           case "1":
           tmpnewchar = "壹" + tmpnewchar;
           break;
           case "2":
           tmpnewchar = "貳" + tmpnewchar;
           break;
           case "3":
           tmpnewchar = "叁" + tmpnewchar;
           break;
           case "4":
           tmpnewchar = "肆" + tmpnewchar;
           break;
           case "5":
           tmpnewchar = "伍" + tmpnewchar;
           break;
           case "6":
           tmpnewchar = "陸" + tmpnewchar;
           break;
           case "7":
           tmpnewchar = "柒" + tmpnewchar;
           break;
           case "8":
           tmpnewchar = "捌" + tmpnewchar;
           break;
           case "9":
           tmpnewchar = "玖" + tmpnewchar;
           break;
           }
           switch(part[0].length - i - 1) {
           case 0:
           tmpnewchar = tmpnewchar + "元";
           break;
           case 1:
           if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
           break;
           case 2:
           if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
           break;
           case 3:
           if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
           break;
           case 4:
           tmpnewchar = tmpnewchar + "萬";
           break;
           case 5:
           if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
           break;
           case 6:
           if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
           break;
           case 7:
           if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
           break;
           case 8:
           tmpnewchar = tmpnewchar + "億";
           break;
           case 9:
           tmpnewchar = tmpnewchar + "拾";
           break;
           }
           var newchar = tmpnewchar + newchar;
           }
           //小數點之后進行轉化
           if(Num.indexOf(".") != -1) {
           if(part[1].length > 2) {
           // alert("小數點之后只能保留兩位,系統將自動截斷");
           part[1] = part[1].substr(0, 2)
           }
           for(i = 0; i < part[1].length; i++) {
           tmpnewchar = ""
           perchar = part[1].charAt(i)
           switch(perchar) {
           case "0":
           tmpnewchar = "零" + tmpnewchar;
           break;
           case "1":
           tmpnewchar = "壹" + tmpnewchar;
           break;
           case "2":
           tmpnewchar = "貳" + tmpnewchar;
           break;
           case "3":
           tmpnewchar = "叁" + tmpnewchar;
           break;
           case "4":
           tmpnewchar = "肆" + tmpnewchar;
           break;
           case "5":
           tmpnewchar = "伍" + tmpnewchar;
           break;
           case "6":
           tmpnewchar = "陸" + tmpnewchar;
           break;
           case "7":
           tmpnewchar = "柒" + tmpnewchar;
           break;
           case "8":
           tmpnewchar = "捌" + tmpnewchar;
           break;
           case "9":
           tmpnewchar = "玖" + tmpnewchar;
           break;
           }
           if(i == 0) tmpnewchar = tmpnewchar + "角";
           if(i == 1) tmpnewchar = tmpnewchar + "分";
           newchar = newchar + tmpnewchar;
           }
           }
           //替換所有無用漢字
           while(newchar.search("零零") != -1)
           newchar = newchar.replace("零零", "零");
           newchar = newchar.replace("零億", "億");
           newchar = newchar.replace("億萬", "億");
           newchar = newchar.replace("零萬", "萬");
           newchar = newchar.replace("零元", "元");
           newchar = newchar.replace("零角", "");
           newchar = newchar.replace("零分", "");
           if(newchar.charAt(newchar.length - 1) == "元") {
           newchar = newchar + "整"
           }
           return newchar;
           }
          

          6. Http

          /**
           * @param {setting}
           */
          ajax(setting){
           //設置參數的初始值
           var opts={
           method: (setting.method || "GET").toUpperCase(), //請求方式
           url: setting.url || "", // 請求地址
           async: setting.async || true, // 是否異步
           dataType: setting.dataType || "json", // 解析方式
           data: setting.data || "", // 參數
           success: setting.success || function(){}, // 請求成功回調
           error: setting.error || function(){} // 請求失敗回調
           }
           // 參數格式化
           function params_format (obj) {
           var str = ''
           for (var i in obj) {
           str += i + '=' + obj[i] + '&'
           }
           return str.split('').slice(0, -1).join('')
           }
           // 創建ajax對象
           var xhr=new XMLHttpRequest();
           // 連接服務器open(方法GET/POST,請求地址, 異步傳輸)
           if(opts.method == 'GET'){
           xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async);
           xhr.send();
           }else{
           xhr.open(opts.method, opts.url, opts.async);
           xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           xhr.send(opts.data);
           }
           /*
           ** 每當readyState改變時,就會觸發onreadystatechange事件
           ** readyState屬性存儲有XMLHttpRequest的狀態信息
           ** 0 :請求未初始化
           ** 1 :服務器連接已建立
           ** 2 :請求已接受
           ** 3 : 請求處理中
           ** 4 :請求已完成,且相應就緒
           */
           xhr.onreadystatechange = function() {
           if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
           switch(opts.dataType){
           case "json":
           var json = JSON.parse(xhr.responseText);
           opts.success(json);
           break;
           case "xml":
           opts.success(xhr.responseXML);
           break;
           default:
           opts.success(xhr.responseText);
           break;
           }
           }
           }
           xhr.onerror = function(err) {
           opts.error(err);
           }
          }
          /**
           * @param {url}
           * @param {setting}
           * @return {Promise}
           */
          fetch(url, setting) {
           //設置參數的初始值
           let opts={
           method: (setting.method || 'GET').toUpperCase(), //請求方式
           headers : setting.headers || {}, // 請求頭設置
           credentials : setting.credentials || true, // 設置cookie是否一起發送
           body: setting.body || {},
           mode : setting.mode || 'no-cors', // 可以設置 cors, no-cors, same-origin
           redirect : setting.redirect || 'follow', // follow, error, manual
           cache : setting.cache || 'default' // 設置 cache 模式 (default, reload, no-cache)
           }
           let dataType = setting.dataType || "json", // 解析方式 
           data = setting.data || "" // 參數
           // 參數格式化
           function params_format (obj) {
           var str = ''
           for (var i in obj) {
           str += `${i}=${obj[i]}&`
           }
           return str.split('').slice(0, -1).join('')
           }
           if (opts.method === 'GET') {
           url = url + (data?`?${params_format(data)}`:'')
           }else{
           setting.body = data || {}
           }
           return new Promise( (resolve, reject) => {
           fetch(url, opts).then( async res => {
           let data = dataType === 'text' ? await res.text() :
           dataType === 'blob' ? await res.blob() : await res.json() 
           resolve(data)
           }).catch( e => {
           reject(e)
           })
           })
          }
          

          7. DOM

          $ (selector){ 
           var type = selector.substring(0, 1);
           if (type === '#') {
           if (document.querySelecotor) return document.querySelector(selector)
           return document.getElementById(selector.substring(1))
           }else if (type === '.') {
           if (document.querySelecotorAll) return document.querySelectorAll(selector)
           return document.getElementsByClassName(selector.substring(1))
           }else{
           return document['querySelectorAll' ? 'querySelectorAll':'getElementsByTagName'](selector)
           }
          } 
          /*檢測類名*/
          hasClass (ele, name) {
           return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
          }
          /*添加類名*/
          addClass (ele, name) {
           if (!this.hasClass(ele, name)) ele.className += " " + name;
          }
          /*刪除類名*/
          removeClass (ele, name) {
           if (this.hasClass(ele, name)) {
           var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');
           ele.className = ele.className.replace(reg, '');
           }
          }
          /*替換類名*/
          replaceClass (ele, newName, oldName) {
           this.removeClass(ele, oldName);
           this.addClass(ele, newName);
          }
          /*獲取兄弟節點*/
          siblings (ele) {
           console.log(ele.parentNode)
           var chid = ele.parentNode.children,eleMatch = []; 
           for(var i = 0, len = chid.length; i < len; i ++){ 
           if(chid[i] != ele){ 
           eleMatch.push(chid[i]); 
           } 
           } 
           return eleMatch;
          }
          /*獲取行間樣式屬性*/
          getByStyle (obj,name){
           if(obj.currentStyle){
           return obj.currentStyle[name];
           }else{
           return getComputedStyle(obj,false)[name];
           }
          }
          

          8. Storage 儲存操作

          class StorageFn {
           constructor () {
           this.ls = window.localStorage;
           this.ss = window.sessionStorage;
           }
           /*-----------------cookie---------------------*/
           /*設置cookie*/
           setCookie (name, value, day) {
           var setting = arguments[0];
           if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
           for (var i in setting) {
           var oDate = new Date();
           oDate.setDate(oDate.getDate() + day);
           document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
           }
           }else{
           var oDate = new Date();
           oDate.setDate(oDate.getDate() + day);
           document.cookie = name + '=' + value + ';expires=' + oDate;
           }
           }
           /*獲取cookie*/
           getCookie (name) {
           var arr = document.cookie.split('; ');
           for (var i = 0; i < arr.length; i++) {
           var arr2 = arr[i].split('=');
           if (arr2[0] == name) {
           return arr2[1];
           }
           }
           return '';
           }
           /*刪除cookie*/
           removeCookie (name) {
           this.setCookie(name, 1, -1);
           }
           /*-----------------localStorage---------------------*/
           /*設置localStorage*/
           setLocal(key, val) {
           var setting = arguments[0];
           if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
           for(var i in setting){
           this.ls.setItem(i, JSON.stringify(setting[i]))
           }
           }else{
           this.ls.setItem(key, JSON.stringify(val))
           }
           }
           /*獲取localStorage*/
           getLocal(key) {
           if (key) return JSON.parse(this.ls.getItem(key))
           return null;
           }
           /*移除localStorage*/
           removeLocal(key) {
           this.ls.removeItem(key)
           }
           /*移除所有localStorage*/
           clearLocal() {
           this.ls.clear()
           }
           /*-----------------sessionStorage---------------------*/
           /*設置sessionStorage*/
           setSession(key, val) {
           var setting = arguments[0];
           if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
           for(var i in setting){
           this.ss.setItem(i, JSON.stringify(setting[i]))
           }
           }else{
           this.ss.setItem(key, JSON.stringify(val))
           }
           }
           /*獲取sessionStorage*/
           getSession(key) {
           if (key) return JSON.parse(this.ss.getItem(key))
           return null;
           }
           /*移除sessionStorage*/
           removeSession(key) {
           this.ss.removeItem(key)
           }
           /*移除所有sessionStorage*/
           clearSession() {
           this.ss.clear()
           }
          }
          

          9. Other 其它操作

          /*獲取網址參數*/
          getURL(name){
           var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if(r!=null) return r[2]; return null;
          }
          /*獲取全部url參數,并轉換成json對象*/
          getUrlAllParams (url) {
           var url = url ? url : window.location.href;
           var _pa = url.substring(url.indexOf('?') + 1),
           _arrS = _pa.split('&'),
           _rs = {};
           for (var i = 0, _len = _arrS.length; i < _len; i++) {
           var pos = _arrS[i].indexOf('=');
           if (pos == -1) {
           continue;
           }
           var name = _arrS[i].substring(0, pos),
           value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
           _rs[name] = value;
           }
           return _rs;
          }
          /*刪除url指定參數,返回url*/
          delParamsUrl(url, name){
           var baseUrl = url.split('?')[0] + '?';
           var query = url.split('?')[1];
           if (query.indexOf(name)>-1) {
           var obj = {}
           var arr = query.split("&");
           for (var i = 0; i < arr.length; i++) {
           arr[i] = arr[i].split("=");
           obj[arr[i][0]] = arr[i][1];
           };
           delete obj[name];
           var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
           return url
           }else{
           return url;
           }
          }
          /*獲取十六進制隨機顏色*/
          getRandomColor () {
           return '#' + (function(h) {
           return new Array(7 - h.length).join("0") + h;
           })((Math.random() * 0x1000000 << 0).toString(16));
          }
          /*圖片加載*/
          imgLoadAll(arr,callback){
           var arrImg = []; 
           for (var i = 0; i < arr.length; i++) {
           var img = new Image();
           img.src = arr[i];
           img.onload = function(){
           arrImg.push(this);
           if (arrImg.length == arr.length) {
           callback && callback();
           }
           }
           }
          }
          /*音頻加載*/
          loadAudio(src, callback) {
           var audio = new Audio(src);
           audio.onloadedmetadata = callback;
           audio.src = src;
          }
          /*DOM轉字符串*/
          domToStirng(htmlDOM){
           var div= document.createElement("div");
           div.appendChild(htmlDOM);
           return div.innerHTML
          }
          /*字符串轉DOM*/
          stringToDom(htmlString){
           var div= document.createElement("div");
           div.innerHTML=htmlString;
           return div.children[0];
          }
          /**
           * 光標所在位置插入字符,并設置光標位置
           * 
           * @param {dom} 輸入框
           * @param {val} 插入的值
           * @param {posLen} 光標位置處在 插入的值的哪個位置
           */
          setCursorPosition (dom,val,posLen) {
           var cursorPosition = 0;
           if(dom.selectionStart){
           cursorPosition = dom.selectionStart;
           }
           this.insertAtCursor(dom,val);
           dom.focus();
           console.log(posLen)
           dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));
          }
          /*光標所在位置插入字符*/
          insertAtCursor(dom, val) {
           if (document.selection){
           dom.focus();
           sel = document.selection.createRange();
           sel.text = val;
           sel.select();
           }else if (dom.selectionStart || dom.selectionStart == '0'){
           let startPos = dom.selectionStart;
           let endPos = dom.selectionEnd;
           let restoreTop = dom.scrollTop;
           dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);
           if (restoreTop > 0){
           dom.scrollTop = restoreTop;
           }
           dom.focus();
           dom.selectionStart = startPos + val.length;
           dom.selectionEnd = startPos + val.length;
           } else {
           dom.value += val;
           dom.focus();
           }
          }
          

          CSS

          1. pc-reset PC樣式初始化

          /* normalize.css */
          html {
           line-height: 1.15;
           /* 1 */
           -ms-text-size-adjust: 100%;
           /* 2 */
           -webkit-text-size-adjust: 100%;
           /* 2 */
          }
          body {
           margin: 0;
          }
          article,
          aside,
          footer,
          header,
          nav,
          section {
           display: block;
          }
          h1 {
           font-size: 2em;
           margin: 0.67em 0;
          }
          figcaption,
          figure,
          main {
           /* 1 */
           display: block;
          }
          figure {
           margin: 1em 40px;
          }
          hr {
           box-sizing: content-box;
           /* 1 */
           height: 0;
           /* 1 */
           overflow: visible;
           /* 2 */
          }
          pre {
           font-family: monospace, monospace;
           /* 1 */
           font-size: 1em;
           /* 2 */
          }
          a {
           background-color: transparent;
           /* 1 */
           -webkit-text-decoration-skip: objects;
           /* 2 */
          }
          abbr[title] {
           border-bottom: none;
           /* 1 */
           text-decoration: underline;
           /* 2 */
           text-decoration: underline dotted;
           /* 2 */
          }
          b,
          strong {
           font-weight: inherit;
          }
          b,
          strong {
           font-weight: bolder;
          }
          code,
          kbd,
          samp {
           font-family: monospace, monospace;
           /* 1 */
           font-size: 1em;
           /* 2 */
          }
          dfn {
           font-style: italic;
          }
          mark {
           background-color: #ff0;
           color: #000;
          }
          small {
           font-size: 80%;
          }
          sub,
          sup {
           font-size: 75%;
           line-height: 0;
           position: relative;
           vertical-align: baseline;
          }
          sub {
           bottom: -0.25em;
          }
          sup {
           top: -0.5em;
          }
          audio,
          video {
           display: inline-block;
          }
          audio:not([controls]) {
           display: none;
           height: 0;
          }
          img {
           border-style: none;
          }
          svg:not(:root) {
           overflow: hidden;
          }
          button,
          input,
          optgroup,
          select,
          textarea {
           font-family: sans-serif;
           /* 1 */
           font-size: 100%;
           /* 1 */
           line-height: 1.15;
           /* 1 */
           margin: 0;
           /* 2 */
          }
          button,
          input {
           /* 1 */
           overflow: visible;
          }
          button,
          select {
           /* 1 */
           text-transform: none;
          }
          button,
          html [type="button"],
          /* 1 */
          [type="reset"],
          [type="submit"] {
           -webkit-appearance: button;
           /* 2 */
          }
          button::-moz-focus-inner,
          [type="button"]::-moz-focus-inner,
          [type="reset"]::-moz-focus-inner,
          [type="submit"]::-moz-focus-inner {
           border-style: none;
           padding: 0;
          }
          button:-moz-focusring,
          [type="button"]:-moz-focusring,
          [type="reset"]:-moz-focusring,
          [type="submit"]:-moz-focusring {
           outline: 1px dotted ButtonText;
          }
          fieldset {
           padding: 0.35em 0.75em 0.625em;
          }
          legend {
           box-sizing: border-box;
           /* 1 */
           color: inherit;
           /* 2 */
           display: table;
           /* 1 */
           max-width: 100%;
           /* 1 */
           padding: 0;
           /* 3 */
           white-space: normal;
           /* 1 */
          }
          progress {
           display: inline-block;
           /* 1 */
           vertical-align: baseline;
           /* 2 */
          }
          textarea {
           overflow: auto;
          }
          [type="checkbox"],
          [type="radio"] {
           box-sizing: border-box;
           /* 1 */
           padding: 0;
           /* 2 */
          }
          [type="number"]::-webkit-inner-spin-button,
          [type="number"]::-webkit-outer-spin-button {
           height: auto;
          }
          [type="search"] {
           -webkit-appearance: textfield;
           /* 1 */
           outline-offset: -2px;
           /* 2 */
          }
          [type="search"]::-webkit-search-cancel-button,
          [type="search"]::-webkit-search-decoration {
           -webkit-appearance: none;
          }
           ::-webkit-file-upload-button {
           -webkit-appearance: button;
           /* 1 */
           font: inherit;
           /* 2 */
          }
          details,
          /* 1 */
          menu {
           display: block;
          }
          summary {
           display: list-item;
          }
          canvas {
           display: inline-block;
          }
          template {
           display: none;
          }
          [hidden] {
           display: none;
          }
          /* reset */
          html,
          body,
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          div,
          dl,
          dt,
          dd,
          ul,
          ol,
          li,
          p,
          blockquote,
          pre,
          hr,
          figure,
          table,
          caption,
          th,
          td,
          form,
          fieldset,
          legend,
          input,
          button,
          textarea,
          menu {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
          }
          

          2. Phone-reset

          /* normalize.css */
          html {
           line-height: 1.15;
           /* 1 */
           -ms-text-size-adjust: 100%;
           /* 2 */
           -webkit-text-size-adjust: 100%;
           /* 2 */
          }
          body {
           margin: 0;
          }
          article,
          aside,
          footer,
          header,
          nav,
          section {
           display: block;
          }
          h1 {
           font-size: 2em;
           margin: 0.67em 0;
          }
          figcaption,
          figure,
          main {
           /* 1 */
           display: block;
          }
          figure {
           margin: 1em 40px;
          }
          hr {
           box-sizing: content-box;
           /* 1 */
           height: 0;
           /* 1 */
           overflow: visible;
           /* 2 */
          }
          pre {
           font-family: monospace, monospace;
           /* 1 */
           font-size: 1em;
           /* 2 */
          }
          a {
           background-color: transparent;
           /* 1 */
           -webkit-text-decoration-skip: objects;
           /* 2 */
          }
          abbr[title] {
           border-bottom: none;
           /* 1 */
           text-decoration: underline;
           /* 2 */
           text-decoration: underline dotted;
           /* 2 */
          }
          b,
          strong {
           font-weight: inherit;
          }
          b,
          strong {
           font-weight: bolder;
          }
          code,
          kbd,
          samp {
           font-family: monospace, monospace;
           /* 1 */
           font-size: 1em;
           /* 2 */
          }
          dfn {
           font-style: italic;
          }
          mark {
           background-color: #ff0;
           color: #000;
          }
          small {
           font-size: 80%;
          }
          sub,
          sup {
           font-size: 75%;
           line-height: 0;
           position: relative;
           vertical-align: baseline;
          }
          sub {
           bottom: -0.25em;
          }
          sup {
           top: -0.5em;
          }
          audio,
          video {
           display: inline-block;
          }
          audio:not([controls]) {
           display: none;
           height: 0;
          }
          img {
           border-style: none;
          }
          svg:not(:root) {
           overflow: hidden;
          }
          button,
          input,
          optgroup,
          select,
          textarea {
           font-family: sans-serif;
           /* 1 */
           font-size: 100%;
           /* 1 */
           line-height: 1.15;
           /* 1 */
           margin: 0;
           /* 2 */
          }
          button,
          input {
           /* 1 */
           overflow: visible;
          }
          button,
          select {
           /* 1 */
           text-transform: none;
          }
          button,
          html [type="button"],
          /* 1 */
          [type="reset"],
          [type="submit"] {
           -webkit-appearance: button;
           /* 2 */
          }
          button::-moz-focus-inner,
          [type="button"]::-moz-focus-inner,
          [type="reset"]::-moz-focus-inner,
          [type="submit"]::-moz-focus-inner {
           border-style: none;
           padding: 0;
          }
          button:-moz-focusring,
          [type="button"]:-moz-focusring,
          [type="reset"]:-moz-focusring,
          [type="submit"]:-moz-focusring {
           outline: 1px dotted ButtonText;
          }
          fieldset {
           padding: 0.35em 0.75em 0.625em;
          }
          legend {
           box-sizing: border-box;
           /* 1 */
           color: inherit;
           /* 2 */
           display: table;
           /* 1 */
           max-width: 100%;
           /* 1 */
           padding: 0;
           /* 3 */
           white-space: normal;
           /* 1 */
          }
          progress {
           display: inline-block;
           /* 1 */
           vertical-align: baseline;
           /* 2 */
          }
          textarea {
           overflow: auto;
          }
          [type="checkbox"],
          [type="radio"] {
           box-sizing: border-box;
           /* 1 */
           padding: 0;
           /* 2 */
          }
          [type="number"]::-webkit-inner-spin-button,
          [type="number"]::-webkit-outer-spin-button {
           height: auto;
          }
          [type="search"] {
           -webkit-appearance: textfield;
           /* 1 */
           outline-offset: -2px;
           /* 2 */
          }
          [type="search"]::-webkit-search-cancel-button,
          [type="search"]::-webkit-search-decoration {
           -webkit-appearance: none;
          }
           ::-webkit-file-upload-button {
           -webkit-appearance: button;
           /* 1 */
           font: inherit;
           /* 2 */
          }
          details,
          /* 1 */
          menu {
           display: block;
          }
          summary {
           display: list-item;
          }
          canvas {
           display: inline-block;
          }
          template {
           display: none;
          }
          [hidden] {
           display: none;
          }
          /* reset */
          html,
          body,
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          div,
          dl,
          dt,
          dd,
          ul,
          ol,
          li,
          p,
          blockquote,
          pre,
          hr,
          figure,
          table,
          caption,
          th,
          td,
          form,
          fieldset,
          legend,
          input,
          button,
          textarea,
          menu {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
          }
          html,
          body {
           /* 禁止選中文本 */
           -webkit-user-select: none;
           user-select: none;
           font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif
          }
          /* 禁止長按鏈接與圖片彈出菜單 */
          a,
          img {
           -webkit-touch-callout: none;
          }
          /*ios android去除自帶陰影的樣式*/
          a,
          input {
           -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          }
          input[type="text"] {
           -webkit-appearance: none;
          }
          

          3. 公共樣式提取

          /* 禁止選中文本 */
          .usn{
           -webkit-user-select:none;
           -moz-user-select:none;
           -ms-user-select:none;
           -o-user-select:none;
           user-select:none;
          }
          /* 浮動 */
          .fl { float: left; }
          .fr { float: right; }
          .cf { zoom: 1; }
          .cf:after {
           content:".";
           display:block;
           clear:both;
           visibility:hidden;
           height:0;
           overflow:hidden;
          }
          /* 元素類型 */
          .db { display: block; }
          .dn { display: none; }
          .di { display: inline }
          .dib {display: inline-block;}
          .transparent { opacity: 0 }
          /*文字排版、顏色*/
          .f12 { font-size:12px }
          .f14 { font-size:14px }
          .f16 { font-size:16px }
          .f18 { font-size:18px }
          .f20 { font-size:20px }
          .fb { font-weight:bold }
          .fn { font-weight:normal }
          .t2 { text-indent:2em }
          .red,a.red { color:#cc0031 }
          .darkblue,a.darkblue { color:#039 }
          .gray,a.gray { color:#878787 }
          .lh150 { line-height:150% }
          .lh180 { line-height:180% }
          .lh200 { line-height:200% }
          .unl { text-decoration:underline; }
          .no_unl { text-decoration:none; }
          .tl { text-align: left; }
          .tc { text-align: center; }
          .tr { text-align: right; }
          .tj { text-align: justify; text-justify: inter-ideograph; }
          .wn { /* 強制不換行 */
           word-wrap:normal;
           white-space:nowrap;
          }
          .wb { /* 強制換行 */
           white-space:normal;
           word-wrap:break-word;
           word-break:break-all;
          }
          .wp { /* 保持空白序列*/
           overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;
          }
          .wes { /* 多出部分用省略號表示 , 用于一行 */
           overflow:hidden;
           word-wrap:normal;
           white-space:nowrap;
           text-overflow:ellipsis;
          }
          .wes-2 { /* 適用于webkit內核和移動端 */
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
          } 
          .wes-3 {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
          }
          .wes-4 {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 4;
           overflow: hidden;
          }
          /* 溢出樣式 */
          .ofh { overflow: hidden; }
          .ofs {overflow: scroll; }
          .ofa {overflow: auto; }
          .ofv {overflow: visible; }
          /* 定位方式 */
          .ps {position: static; }
          .pr {position: relative;zoom:1; }
          .pa {position: absolute; }
          .pf {position: fixed; }
          /* 垂直對齊方式 */
          .vt {vertical-align: top; }
          .vm {vertical-align: middle; }
          .vb {vertical-align: bottom; }
          /* 鼠標樣式 */
          .csd {cursor: default; }
          .csp {cursor: pointer; }
          .csh {cursor: help; }
          .csm {cursor: move; }
          /* flex布局 */
          .df-sb {
           display:flex;
           align-items: center;
           justify-content: space-between;
          }
          .df-sa {
           display:flex;
           align-items: center;
           justify-content: space-around;
          }
          /* 垂直居中 */
          .df-c {
           display: flex;
           align-items: center;
           justify-content: center;
          }
          .tb-c {
           text-align:center;
           display:table-cell;
           vertical-align:middle;
          }
          .ts-c {
           position: absolute;
           left: 50%; top: 50%;
           transform: translate(-50%, -50%);
          }
          .ts-mc {
           position: absolute;
           left: 0;right: 0;
           bottom: 0; top: 0;
           margin: auto;
          }
          /* 輔助 */
          .mask-fixed-wrapper {
           width: 100%;
           height: 100%;
           position: fixed;
           left:0;top:0;
           background: rgba(0, 0, 0, 0.65);
           z-index: 999;
          }
          .bg-cover {
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center center;
          }
          .bg-cover-all {
           background-size: 100% 100%;
           background-repeat: no-repeat;
           background-position: center center;
          }
          

          以上都是經常用到的方法

          本文作者:咚子

          原文鏈接:http://dzblog.cn/article/5a6f48afad4db304be1e7a5f

          版權歸作者所有,轉載請注明出處


          主站蜘蛛池模板: 无码毛片视频一区二区本码| 一区二区三区在线免费观看视频| 久久免费精品一区二区| 免费无码一区二区三区蜜桃| 色欲综合一区二区三区| 亚洲AV无码一区二区一二区| 高清无码一区二区在线观看吞精| 少妇无码AV无码一区| 中文无码AV一区二区三区| 精品熟人妻一区二区三区四区不卡| 国产精品电影一区二区三区| 国产在线精品一区二区不卡麻豆| 亚洲国产成人一区二区三区| 合区精品久久久中文字幕一区| 国产AV午夜精品一区二区入口| 极品少妇一区二区三区四区| 亚洲国产成人一区二区精品区| 久久一区二区三区99| 视频一区二区三区在线观看| 精品国产一区二区三区AV | 久久久精品人妻一区亚美研究所| 亚洲一区二区三区国产精品| 国产凸凹视频一区二区| 激情无码亚洲一区二区三区| 濑亚美莉在线视频一区| 国产精品美女一区二区三区 | 国产伦精品一区二区三区不卡 | 国产乱码精品一区三上| 国产一区二区三区在线看片| 一区二区三区91| 亚洲午夜在线一区| 日韩一区在线视频| 国产一区二区三精品久久久无广告| 亚洲熟女少妇一区二区| 精品无码人妻一区二区三区品| 国产手机精品一区二区| 日本一区二区三区精品视频| 国产激情一区二区三区| 国产99视频精品一区| 亚洲国产日韩一区高清在线| 无码少妇一区二区三区|