整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
端開(kāi)發(fā)中經(jīng)常遇到需要轉(zhuǎn)換后端返回的時(shí)間數(shù)據(jù)，轉(zhuǎn)為前端需要自己的格式，使用開(kāi)源庫(kù)moment.js可以快速幫助我們轉(zhuǎn)換，因?yàn)檫@個(gè)庫(kù)已經(jīng)提供很多時(shí)間轉(zhuǎn)換方法，我們可以拿來(lái)直接使用，這個(gè)庫(kù)的官方地址：GitHub - moment/moment: Parse, validate, manipulate, and display dates in javascript.
npm install moment --save//定義moment全局日期過(guò)濾器
import Moment from 'moment'
Vue.filter('convertTime', function (data, formatStr) {
return Moment(data).format(formatstr);
});{{ 'xxx' | convertTime（'yyyy—mm—dd'） }}也可以不在main.js注冊(cè)過(guò)濾器（Vue 3沒(méi)有過(guò)濾器，Vue 2才有過(guò)濾器），直接在vue頁(yè)面的script使用內(nèi)置的方法
使用moment將時(shí)間戳和日期互轉(zhuǎn)：
TML 文本格式化
加粗文本
斜體文本
電腦自動(dòng)輸出
這是 下標(biāo) 和 上標(biāo)
HTML 格式化標(biāo)簽
HTML 使用標(biāo)簽<b> 與<i> 對(duì)輸出的文本進(jìn)行格式, 如：粗體 or 斜體
這些HTML標(biāo)簽被稱為格式化標(biāo)簽（請(qǐng)查看底部完整標(biāo)簽參考手冊(cè)）。
| 通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來(lái)使用, <em> 替換 <i>標(biāo)簽使用。然而，這些標(biāo)簽的含義是不同的：<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過(guò)，未來(lái)瀏覽器可能會(huì)支持更好的渲染效果。 |
在線實(shí)例
文本格式化
此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化
預(yù)格式文本
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
"計(jì)算機(jī)輸出"標(biāo)簽
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
地址
此例演示如何在 HTML 文件中寫(xiě)地址。
縮寫(xiě)和首字母縮寫(xiě)
此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)。
文字方向
此例演示如何改變文字的方向。
塊引用
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。
刪除字效果和插入字效果
此例演示如何標(biāo)記刪除文本和插入文本。
HTML 文本格式化標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號(hào)字 |
| <strong> | 定義加重語(yǔ)氣 |
| <sub> | 定義下標(biāo)字 |
| <sup> | 定義上標(biāo)字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML "計(jì)算機(jī)輸出" 標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <code> | 定義計(jì)算機(jī)代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計(jì)算機(jī)代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預(yù)格式文本 |
HTML 引文, 引用, 及標(biāo)簽定義
| 標(biāo)簽 | 描述 |
|---|---|
| <abbr> | 定義縮寫(xiě) |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長(zhǎng)的引用 |
| <q> | 定義短的引用語(yǔ) |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個(gè)定義項(xiàng)目。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
們?cè)谔幚砣掌谡故镜臅r(shí)候經(jīng)常需要將時(shí)間戳轉(zhuǎn)換為格式化的日期，比較省力的方法是直接使用日期格式化的NPM包，比如：moment.js。但是有時(shí)候你不想因?yàn)檫@個(gè)小需求引入一個(gè)包，或者你想用原生JavaScript實(shí)現(xiàn)格式化。
可能的實(shí)現(xiàn)是這樣的：
const date=new Date();
const year=date.getFullYear();
const month=date.getMonth() + 1;
const day=date.getDate();
const hour=date.getHours();
const min=date.getMinutes();
const ss=date.getSeconds();
console.log(`${year}-${month}-${day} ${hour}:${min}:${ss}`);
// 2021-8-1 10:31:45
但是這樣還不符合格式，因?yàn)樵路荩掌冢r(shí)，分，秒有可能是一位數(shù)字，需要在數(shù)字前補(bǔ)0。所以上面的代碼還需要修改一下：
const padZero=function(num){ return num < 10 ? `0${num}` : num;}
const date=new Date();
const year=date.getFullYear();
const month=date.getMonth() + 1;
const day=date.getDate();
const hour=date.getHours();
const min=date.getMinutes();
const ss=date.getSeconds();
console.log(`${year}-${padZero(month)}-${padZero(day)} ${padZero(hour)}:${padZero(min)}:${padZero(ss)}`);
// 2021-08-01 10:38:26
我們實(shí)現(xiàn)了一個(gè)工具數(shù)字大小自動(dòng)補(bǔ)零的方法，除了上面的方法還有別的方式嗎？JavaScript作為一個(gè)非常靈活的語(yǔ)言，一定有其他的實(shí)現(xiàn)方式。今天就看到一個(gè)巧妙的解決辦法。
const date=new Date();
const year=date.getFullYear();
const month='0' + (date.getMonth() + 1);
const day='0' + date.getDate();
const hour='0' + date.getHours();
const min='0' + date.getMinutes();
const ss='0' + date.getSeconds();
console.log(`${year}-${month.slice(-2)}-${day.slice(-2)} ${hour.slice(-2)}:${min.slice(-2)}:${ss.slice(-2)}`);
// 2021-08-01 13:43:29
先通過(guò)統(tǒng)一添加前綴字符"0"，然后再統(tǒng)一截取后兩位字符。這樣做確實(shí)很聰明，很好地達(dá)到了格式化的目的。
語(yǔ)言沒(méi)有高低之分，水平在乎自己。
歡迎大家點(diǎn)贊，評(píng)論，收藏，轉(zhuǎn)發(fā)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
