【小記】--經常使用代碼總結

目錄  https://github.com/wenzi0github/javascript-css-common

  1. CSS初始化樣式reset.css
  2. 去除浮動clearfix
  3. js操做cookie
  4. css強制換行/自動換行/強制不換行
  5. table邊界的樣式
  6. div上下左右居中
  7. 圖片上下左右居中
  8. js字符串翻轉
  9. iPad頁面適配框架
  10. google html5.js
  11. js產生隨機數字
  12. table中的td對齊屬性
  13. radio-checkbox-select
  14. requestAnimationFrame的兼容性處理
  15. 獲取鼠標移動的方向
  16. 擴展String中的format
  17. html字段轉換函數
  18. js產生隨機字符串
  19. 檢測瀏覽器是否支持fixed
  20. 解析url中的參數
  21. 圖片懶加載
  22. jQuery回到頂部
  23. 圖片hover放大
  24. 時間格式化
  25. Object.assign兼容
  26. 標題兩邊的小橫槓
  27. 如何獲取當前所在周的起始和結束的日期

1. CSS初始化樣式reset.css

不一樣的瀏覽器對各個標籤默認的樣式是不同的,並且有時候咱們也不想使用瀏覽器給出的默認樣式,咱們就能夠用reset.css去掉其默認樣式javascript

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } 

2. 去除浮動clearfix

一般咱們在有浮動元素的狀況下,會在同級目錄下再建立一個<div style="clear:both;"></div>;不過這樣會增長不少無用的代碼。此時咱們用:after這個僞元素來解決浮動的問題,若是當前層級有浮動元素,那麼在其父級添加上clearfix類便可。css

.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix{zoom:1}

3. js操做cookie

var  cookie = { //寫cookies setCookie: function (name, value){ var Days = 365; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "=" + escape (value) + ";expires=" + exp.toGMTString(); }, //讀取cookies getCookie: function (name){ var arr,reg= new RegExp( "(^| )" +name+ "=([^;]*)(;|$)" ); if (arr=document.cookie.match(reg)) return unescape(arr[2]); else return null ; }, //刪除cookies, name能夠爲字符串('username')或數組(['username', 'password', ...]) delCookie: function (name) { var delItem = function(item){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = cookie.getCookie(item); if (cval!== null ) document.cookie= item + "=" +cval+ ";expires=" +exp.toGMTString(); } if( typeof name === 'string' ){ delItem( name ); }else{ for(var i=0, len=name.length; i<len; i++){ delItem( name[i] ); } } } }

4. css強制換行/自動換行/強制不換行

/* 強制不換行 */ div{ white-space:nowrap; } /* 自動換行 */ div{ word-wrap: break-word; word-break: normal; } /* 強制英文單詞斷行 */ div{ word-break:break-all; }

####5. table邊界的樣式html

table { border: 1px solid #000; padding: 0; border-collapse: collapse; table-layout: fixed; margin-top: 10px;} table td { height: 30px; border: 1px solid #000; background: #fff; font-size: 15px; padding: 3px 3px 3px 8px; color: #000; width: 160px;}

6. div上下左右居中

div{
  position:absolute; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px; }

7. 圖片上下左右居中

一種經常使用的方式是把外層的div設置爲table-cell;而後讓內部的元素上下左右居中。固然也還有一種方式,就是把img當作div,參考6中的代碼進行設置。
CSS代碼以下:html5

.content{
  width: 400px; height: 400px; border: 1px solid #ccc; text-align: center; display:table-cell; vertical-align:middle; }

html代碼以下:java

<div class="content"> <img src="./4.jpg" alt="img"> </div>

8. js字符串翻轉

js中沒有直接對字符串進行反轉的,須要咱們先轉換成數組,而後使用數組中的reverse()方法翻轉,最後在把數組拼接回字符串。jquery

var str = "abcdefg"; var revs = str.split("").reverse().join(""); console.log(revs);

9. iPad頁面適配框架

這是一個適配iPad頁面的大體框架,包括豎屏和橫屏ios

iPad 適配
/* ipad 豎屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body{ color:#000; } /* … */ } /* ipad 橫屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body{ color:#000; } /* … */ }

10. google html5.js

這是Google提供的js框架,使IE8及如下的瀏覽器支持html5新標籤 html5.js 連接git

/*
 HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>"; c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f); if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

11. js產生隨機數字

這是利用js裏的Math.random()產生的。若使用 *1000000 而後再強制轉成整型也行;不過使用下面的方式能夠更加簡潔一些,直接截取隨機數的最後6位進行返回:github

function getRanNum(){ return (''+Math.random()).slice(-6); // Math.random().toString().slice(-6) }

其實,產生32位的字母和數字混合的字符串也比較簡單,先給出一個含有包含全部字符和數字的混合字符串,而後使用Math.random()摘取每位上的字符進行拼接,最後可以獲得一個32位的隨機字符串;或者使用js的md5()進行加密也能夠。能夠參考本人收藏的md5加密代碼【md5加密web

12. table中td的對齊屬性

在table中有兩個默認的屬性:align(橫向對齊屬性)和valign(豎向對齊屬性)。
align有三個值:left(左對齊,默認),center(左右居中),right(右對齊);如想要文字居中,能夠:

<td align='center'>wenzi</td>

valign也三個值:top(上對齊),middle(上下居中,默認),bottom(下對齊);如想要文字上居中,能夠:

<td valign='top'>wenzi</td>

固然,爲了實現結構與樣式的分離,推薦使用CSS的屬性。

td{
  align: center; /* 橫向對齊:left, center, right */ vertical-align: top; /* 豎向對齊:top, middle, bottom */ }

13. radio-checkbox-select

jquery對radio, checkbox的input標籤和select標籤的操做

input[type=radio]的操做

// boolean, 判斷radio是否有被選中的元素 $('#myradio input[type=radio]').is(':checked'); // 設置radio選中某個元素 $('#myradio input:eq(1)').prop('checked', true); // 設置radio取消選中某個元素 $('#myradio input:eq(1)').prop('checked', false); // 獲取選中的radio的值 var val = $('#myradio input[type=radio]:checked').val();

input[type=checkbox]的操做

// 判斷複選框是否選中 var bool = $('#mycheckbox input[type=checkbox]').is(':checked') ; // 全選,全部的checkbox都添加上checked屬性 $('#checkall').click(function(){ $('#like input[type=checkbox]').prop('checked', true); }) // 反選,判斷當前的checkbox是否被選中,若被選中則設置checked屬性爲false,不然設置checked屬性爲true $('#reverse').click(function(){ $('#like input[type=checkbox]').each(function(){ if($(this).is(':checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } }) }) // 取消選中,去掉全部checkbox的checked屬性 $('#deleteall').click(function(){ $('#like input[type=checkbox]').prop('checked', false); }) // 獲取選中的值 $('#getcheckval').click(function(){ var result = []; $('#mycheckbox input[type=checkbox]:checked').each(function(){ result.push( $(this).val() ); }) console.log(result); })

select標籤

// 獲取select選中的value值,給select一個id,直接使用`val()`獲取就行 $('#province').val()

14. requestAnimationFrame的兼容性處理

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel // MIT license (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());

15. 獲取鼠標移動的方向

咱們必定碰見過鼠標從哪一個地方進入到某div中,遮罩就從哪一個方向出現,鼠標從哪一個地方離開這個div,遮罩就從哪一個方向消失。整個動畫實現的基礎就是獲取鼠標移動的方向。

/*
 * 獲取元素移動的方向  * @param $element 元素的jQuery對象  * @param event 事件對象  * @return direction 返回一個數字:0:上,1:右,2:下,3:左  **/ function getDirection($element, event) { var w = $element.width(), h = $element.height(), x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1), y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1), direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; return direction; } $('#content').on('mouseenter', function(event){ console.log( 'enter: '+ getDirection($(this), event) ); }).on('mouseleave', function(event){ console.log( 'leave: '+getDirection($(this), event) ); })

16. 擴展String中的format

  • 對String原型進行擴展: String.prototype.methodName=function...
  • 正則表達式: /{(\d+)}/g ;取"{0}"這種格式的佔位符,並對裏面的數字放入子組
  • js 的 replace 方法有一種重載, string.format(regex , function(group0【匹配項】,group1【子組第一個】...){ //code... }) ;對於每次匹配到的一個佔位符,都從參數相應的位置取得替換項。
String.prototype.format = function () { var args = arguments; var reg = /\{(\d+)\}/g; return this.replace(reg, function (g0, g1) { return args[+g1] || ''; }); }; //用法: "hello {0},your age is {1},so {0}'s age is {1}".format("tom",12); //"hello tom,your age is 12,so tom's age is 12"

若不想在String的類型上進行拓展,也能夠這樣修改:

var tool = { format : function(str){ var args = arguments; var reg = /\{(\d+)\}/g; return str.replace(reg, function (g0, g1) { g1++; return args[+g1] || ''; }); } } tool.format("hello {0},your age is {1},so {0}'s age is {1}", "tom", 12); // "hello tom,your age is 12,so tom's age is 12"

17. html字段轉換函數

function escapeHTML(text) { var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", "\"": "&quot;"}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }
提取html字符串中的內容,剔除標籤
str.replace(/<[^>]+>/g,"")

18. js產生隨機字符串

Math.random().toString(36).substr(2);

頗有意思,研究了一下,基本上toString後的參數規定能夠是2-36之間的任意整數,不寫的話默認是10(也就是十進制),此時返回的值就是那個隨機數。

如果偶數,返回的數值字符串都是短的,如果奇數,則返回的將是一個很大長度的表示值。 若<10 則都是數字組成,>10 纔會包含字母。 因此若是想獲得一長串的隨機字符,則需使用一個 > 10 且是奇數的參數,另外根據長度自行使用slice(2,n)截取!

19. 檢測瀏覽器是否支持fixed

function isSupportFixed() { var userAgent = window.navigator.userAgent, ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/), ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) < 5), operaMini = /Opera Mini/i.test(userAgent), body = document.body, div, isFixed; div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed;z-index:100;'; body.appendChild(div); isFixed = window.getComputedStyle(div).position != 'fixed'; body.removeChild(div); div = null; return !!(isFixed || ios5below || operaMini); }

20. 解析url中的參數

用於解析當前URL中帶的參數,如 http://www.xiabingbao.com/javascript/2015/01/30/geturl-param/?a=1&b=wenzi

function parseUrl(search, name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = url.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } parseUrl(window.location.search, 'id');

21. 圖片懶加載

對須要懶加載的圖片,把真實的圖片地址放到_src的屬性中,不要寫src屬性,由於src的值爲空時也會請求,或者爲src設置一個1x1的佔位圖片。

把整個頁面裏的圖片劃分區域,每一個區域按順序設置圖片的name屬性,值爲page_cnt_{num},num從1開始依次遞增不能有間斷:

<div class="area1"> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" /> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" /> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" /> </div> <div class="area2"> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" /> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" /> <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" /> </div>

當滾動條滾動到當前區域時,則把area1區域裏name的值是page_cnt_1的圖片都加載完成,而area2則在滾動條再次滾動到相應的距離時才加載。

(function(){var a=this;a.pageSize=1E3;a.pageQuotiety=.5;a.imgName="page_cnt_";a.imgs=[];var e,g;e=window.navigator.userAgent.toLowerCase();g=/msie/.test(e);/gecko/.test(e);/opera/.test(e);/safari/.test(e);var f=function(b,a){var d=a?a:document;return"object"==typeof b?b:d.getElementsByName(b)};a.getWindowSize=function(){var b={};if(window.self&&self.innerWidth)return b.width=self.innerWidth,b.height=self.innerHeight,b;if(document.documentElement&&document.documentElement.clientHeight)return b.width= document.documentElement.clientWidth,b.height=document.documentElement.clientHeight,b;b.width=document.body.clientWidth;b.height=document.body.clientHeight;return b};a.getObjPosition=function(b){var a={};a.x=b.offsetLeft;for(a.y=b.offsetTop;b=b.offsetParent;)a.x+=b.offsetLeft,a.y+=b.offsetTop;return a};a._getPageScroll=function(){var a;"undefined"!=typeof window.pageYOffset?a=window.pageYOffset:document.documentElement&&document.documentElement.scrollTop?a=document.documentElement.scrollTop:document.body&& (a=document.body.scrollTop);return a};a._loadImages=function(a){if(a){var c=a;"string"==typeof a&&(c=f(a));for(a=0;a<c.length;a++){var d=c[a];"object"==typeof d&&d.getAttribute("_src")&&(d.setAttribute("src",d.getAttribute("_src")),d.removeAttribute("_src",0))}delete c}};a._loadAllImgs=function(){for(var b=0;a.imgs[b];)a._loadImages(a.imgs[b][0]),b++};a.getImgPosition=function(){for(var b=1,c=f(a.imgName+b);c&&0<c.length;){var c=f("page_cnt_"+b),d=a.getImgLoadPosition(c[0]);a.imgs.push([c,c[0],d]); b++;c=f(a.imgName+b)}};a.getImgLoadPosition=function(b){var c={imgTop:0,pageTop:0};b&&(a.getWindowSize(),c.imgTop=parseInt(a.getObjPosition(b).y),c.pageTop=parseInt(1E3*(c.imgTop/1E3-a.pageQuotiety)));return c};a._addScrollEven=function(){g?window.attachEvent("onscroll",a._scrollFn):window.addEventListener("scroll",a._scrollFn,!1)};a._removeScrollEven=function(){g?window.detachEvent("onscroll",a._scrollFn):window.removeEventListener("scroll",a._scrollFn,!1)};a._scrollFn=function(){var b=a._getPageScroll(), c=a.getWindowSize().height;if(0==c)a._loadAllImgs();else for(var d=0,e=0;a.imgs[d];)b+c<a.imgs[d][2].pageTop||(a._loadImages(a.imgs[d][0]),e++),d++,e>=a.imgs.length&&a._removeScrollEven()};a.getImgPosition();a._addScrollEven();a._scrollFn()})();

22. jQuery回到頂部

回到頂部有很多的方法,沒有緩衝效果的話,先在頂部放置一個a標籤,而後給回到頂部的連接一個#:

// 頂部標籤
<a id="top"></a> // 回到頂部的按鈕 <a href="#top">回到頂部</a>

若是須要緩衝效果的話,可使用jQuery中的animate:

$('body,html').animate({scrollTop:0}, 500);

23. 圖片hover放大

a{
	position: relative; overflow: hidden; display: block; } img{ -webkit-transition: transform .2s ease-out; -moz-transition: transform .2s ease-out; -ms-transition: transform .2s ease-out; -o-transition: transform .2s ease-out; transition: transform .2s ease-out; } a:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
<a href=""> <img src="" /> </a>

24. 時間格式化

//格式化日期 Date.prototype.Format = function (fmt) { var o = { "y+": this.getFullYear(), "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S+": this.getMilliseconds() //毫秒 }; for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)){ if(k == "y+"){ fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length)); } else if(k=="S+"){ var lens = RegExp.$1.length; lens = lens==1?3:lens; fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1,lens)); } else{ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } } return fmt; }

使用:

var date = new Date(); console.log(date.Format("yyyy年MM月dd日 hh:mm:ss.S")); //輸出: 2016年04月01日 10:41:08.133 console.log(date.Format("yyyy-MM-dd hh:mm:ss")); //輸出: 2016-04-01 10:41:08 console.log(date.Format("yy-MM-dd hh:mm:ss")); //輸出: 16-04-01 10:41:08 console.log(date.Format("yy-M-d hh:mm:ss")); //輸出: 16-4-1 10:41:08

25. Object.assign兼容

if( typeof Object.assign !== 'undefined' ){ Object.defineProperty(Object, "assign", { value: function assign(target, varArgs) { 'use strict'; if (target == null) { throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { for (var nextKey in nextSource) { if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, writable: true, configurable: true }); }

26. 標題兩邊的小橫槓

咱們常常會遇到這樣的UI需求,就是標題兩邊有兩個小橫崗,以前是怎麼實現的呢?好比用個border-top屬性,而後再把中間的文字進行絕對定位,同時給這個文字一個背景顏色,把中間的這部分蓋住。

如今咱們可使用僞元素來實現!

<div class="title">標題</div>
title{
    color: #e1767c; font-size: 0.3rem; position: relative; &:before, &:after{ content: ''; position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); border-top: 0.02rem solid #e1767c; width: 0.4rem; } &:before{ margin-left: -1.2rem; } &:after{ margin-left: 1.2rem; } }

27. 如何獲取當前所在周的起始和結束的日期

/**
 * 獲取當前星期的起始日期和結束日期  * @param {string} startFormat 週一的時間格式  * @param {string} endFormat 週日的時間格式  * @param {number} timestamp 所在周的時間戳,若不傳入,則默認使用當前時刻的時間戳  * @returns {string, string} {startDate, endDate} 返回的數據  */ export const getWeekStartAndEnd = ( startFormat: string, endFormat: string, timestamp?: number ): { startDate: string; endDate: string; } => { const oneDayTime = 1000 * 3600 * 24; const nowDate = timestamp ? new Date(timestamp) : new Date(); const now = nowDate.getTime(); const nowDay = nowDate.getDay() === 0 ? 7 : nowDate.getDay(); const startDate = new Date(now - oneDayTime * (nowDay - 1)); const endDate = new Date(now + oneDayTime * (7 - nowDay)); return { startDate: formatTime(startDate.getTime(), startFormat), endDate: formatTime(endDate.getTime(), endFormat) }; };
相關文章
相關標籤/搜索