快捷導(dǎo)航

mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例

更新時(shí)間：2019年01月15日 11:42:32 作者：唐宋元明清.

這篇文章主要介紹了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

mock使用方法很簡(jiǎn)單, 下面是簡(jiǎn)單的用法, 詳細(xì)的用法可以看官方文檔, 寫(xiě)的很清楚, 下面的代碼直接拷貝到本地html文件, 雙擊打開(kāi)即可生成你想要的數(shù)據(jù)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>
</head>
<body>
<script>
  var Random = Mock.Random;
  var data = Mock.mock({
     'list|4': [{
      'id|+1': 1,
      'number|1-10': 7,
      // 英文姓名
      'name' :'@name',
      // 顏色
      'color': '@color',
      // 英文標(biāo)題
      'title': '@title',
      // 鏈接
      'url': '@url("http")',
      // 郵箱
      'email': '@email',
      // 圖片
      'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
      // 時(shí)間
      'date': '@date("yyyy-MM-dd HH:mm:ss")',
      'date2': '@dateTime',
      // 漢字
      'ctitle': '@ctitle(8)',
      // 漢字姓名
      'canme': '@cname()',
      // 地址
      'cadd': '@province' + '@city' + '@county',
      // 手機(jī)號(hào)
      'phone': /^1[385][1-9]\d{8}/
     }]
   });
   console.log(JSON.stringify(data, null, 4))
</script>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述代碼，可得如下運(yùn)行結(jié)果：

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)距離上次刷新已過(guò)多少秒示例
這篇文章主要介紹了JS如何實(shí)現(xiàn)距離上次刷新已過(guò)多少秒,需要的朋友可以參考下
2014-05-05
js getElementsByTagName的簡(jiǎn)寫(xiě)方式
用最少的代碼,做最多的事情. getElementsByTagName的簡(jiǎn)寫(xiě)方法.
2010-06-06
極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言
極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言...
2007-03-03
與iframe進(jìn)行跨域交互的解決方案(推薦)
這篇文章主要介紹了與iframe進(jìn)行跨域交互的解決方案,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
詳解JavaScript的定時(shí)器
這篇文章主要為大家介紹了JavaScript的定時(shí)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)
這篇文章介紹了JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果,涉及JavaScript針對(duì)時(shí)間與日期的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
javascript實(shí)現(xiàn)對(duì)話框功能警告（alert 消息對(duì)話框）確認(rèn)（confirm 消息對(duì)話框）
這篇文章主要介紹了javascript：警告（alert 消息對(duì)話框），確認(rèn)（confirm 消息對(duì)話框）的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤(pán)
在工控機(jī)觸摸屏中,通過(guò)瀏覽器web端進(jìn)行表單輸入,當(dāng)聚焦表單輸入框并不會(huì)出現(xiàn)虛擬鍵盤(pán)進(jìn)行輸入,本文介紹將給大家介紹如何通過(guò)js調(diào)用工控機(jī)(Windows)虛擬鍵盤(pán),文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
JS 滾動(dòng)事件window.onscroll與position：fixed寫(xiě)兼容IE6的回到頂部組件
這篇文章主要介紹了JS 滾動(dòng)事件window.onscroll與position：fixed寫(xiě)兼容IE6的回到頂部組件的相關(guān)資料,需要的朋友可以參考下
2016-10-10