CSS-画一个iPhone12

Phone12发布一个月了，作为还没有拥有过一个苹果设备的穷B程序员。这次，依旧还是买不起。

于是，使用css给自己画了一个。

先看效果：

需求分析：

1、分别画出6个面，然后组成一个立方体。

2、圆角部分使用多个div依次旋转一个角度，组成圆弧

一、画iPhone背面

先画一个圆角长方形；左下到右上渐变；增加border和内阴影使得看起来更立体。

.back {
	position: absolute;
	width: 307px;
	height: 633px;
	background: linear-gradient(65deg, rgb(26, 53, 64) 20%, rgb(37, 63, 76) 50%, rgb(117, 140, 154) 120%);
	border-radius: 46px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 3px 1px;
}

使用径向渐变画出画出一层一层的圆模拟摄像头的光圈。复制两个做出相机组。

.camera-group {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 128px;
	height: 128px;
	background: linear-gradient(70deg, rgb(26, 53, 64) 46%, rgb(55, 81, 93) 46%);
	border-radius: 30px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 3px 1px;
}
.camera {
	position: absolute;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: radial-gradient(#444 1px, rgb(0, 54, 161) 4px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
	border: solid 4px rgb(45, 72, 83);
	box-shadow: 0 0 3px, inset 0 0 2px;
}
.camera1 {
	left: 6px;
	top: 6px;
}
.camera2 {
	left: 6px;
	bottom: 6px;
}
.camera3 {
	top: 50%;
	transform: translateY(-50%);
	right: 6px;
	bottom: 6px;
}
.camera4 {
	position: absolute;
	right: 20px;
	top: 6px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(rgb(214, 200, 217) 2px, rgb(214, 200, 197) 9px, rgb(45, 72, 83) 14px);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}
.camera5 {
	position: absolute;
	right: 20px;
	bottom: 6px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(#333 1px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}
.camera6 {
	position: absolute;
	right: 10px;
	bottom: 30px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgb(6, 6, 6);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}

画一个苹果的logo，这里就使用一个简单的画法，一个div+before+after，做出苹果logo的叶子和两个椭圆。拼凑起接近苹果的样子。使用mask-image给图片遮罩出一个豁口。

.logo {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 145px;
	height: 220px;
	border-radius: 80% 70% 60% 90%/50% 50% 60% 100%;
	background: linear-gradient(70deg, rgb(26, 53, 64) 70%, rgb(55, 81, 93) 50%);
	transform: scale(.28);
	transform-origin: 0 0;
}
.logo::after {
	position: absolute;
	content: '';
	left: 97px;
	width: 145px;
	height: 220px;
	border-radius: 70% 80% 90% 60% /50% 50% 100% 60%;
	background: linear-gradient(70deg, rgb(26, 53, 64) 27%, rgb(55, 81, 93) 27%);
	-webkit-mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);
	mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);
}
.logo::before {
	position: absolute;
	top: -70px;
	left: 117px;
	width: 60px;
	height: 68px;
	background-color: rgb(55, 81, 93);
	content: '';
	border-radius: 100% 0;
}

二、画手机正面

正面本来想一个div搞定，使用多个渐变图片背景。不过渐变的圆边缘会有毛刺效果不好看。

就简单的多画几个渐变背景的圆形div。

.front {
	position: absolute;
	width: 307px;
	height: 633px;
	background: rgb(239, 221, 197);
	border-radius: 46px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transform: translateZ(15px);
}
.front::after {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 46px;
	box-shadow: inset 0 0 0 10px;
	content: '';
}
.circle1 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
}
.circle2 {
	position: absolute;
	width: 196px;
	height: 196px;
	transform: translate(-60px, 0px) scale(1.9);
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42) 20%, rgb(254, 164, 104) 80%);
	border-radius: 50%;
	box-shadow: inset 10px -15px 50px rgb(255, 248, 147), inset -3px 8px 20px rgb(239, 221, 197);
}
.circle3 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -5px 10px 30px rgb(255, 248, 147), inset 5px -15px 40px rgb(255, 206, 86);
	transform: scale(2.8);
}
.circle4 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
	transform: scale(3.6);
}

加上刘海

.front-camera {
	position: absolute;
	top: 0;
	width: 50%;
	height: 32px;
	background: #111;
	border-radius: 0 0 18px 18px/15px;
}
.front-camera::before {
	position: absolute;
	left: 20%;
	bottom: 10px;
	width: 50%;
	height: 8px;
	background: #333;
	content: '';
	border-radius: 4px;
}
.front-camera::after {
	position: absolute;
	right: 20%;
	width: 10px;
	height: 10px;
	content: '';
	background: radial-gradient(#444 1px, rgb(0, 54, 161) 2px, rgb(14, 27, 29) 5px);
	bottom: 9px;
	border-radius: 50%;
}

三、画两个侧边

两个侧边比较简单，长方形div。

在使用3个div，画做三个开关。开关translateZ(2px)的before和after伪元素做出一个立体图片的样子。

.side {
	position: absolute;
	width: 30px;
	height: 541px;
	background: rgb(37, 63, 76);
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
}
.switch {
	position: absolute;
	top: 80px;
	width: 8px;
	height: 50px;
	border-radius: 4px;
	background: rgb(37, 63, 76);
	box-shadow: 1px 1px 2px, -1px -1px 2px rgb(167, 190, 204);
}
.switch-extra {
	transform-style: preserve-3d;
	transform: translateZ(3px);
}
.switch-extra::before {
	position: absolute;
	left: 0;
	top: 5%;
	height: 90%;
	width: 3px;
	background: rgb(37, 63, 76);
	content: '';
	transform-origin: left center;
	transform: rotateY(90deg);
}
.switch-extra::after {
	position: absolute;
	left: 0;
	top: 2%;
	height: 96%;
	width: 3px;
	background: rgb(37, 63, 76);
	content: '';
	transform-origin: right center;
	transform: rotateY(-90deg);
}

四、画出顶部底部

这里跟上下两边类似

五、画出四个圆角

圆角需要是多个div旋转一定角度。拼接成一个圆弧

.pad-radius {
	position: absolute;
	width: 30px;
	height: 9px;
	background: rgb(37, 63, 76);
}
.pad-radius0 {
	transform: rotateY(-90deg) rotateX(0deg) translateZ(48px);
}
.pad-radius1 {
	transform: rotateY(-90deg) rotateX(10deg) translateZ(48px);
}
.pad-radius2 {
	transform: rotateY(-90deg) rotateX(20deg) translateZ(48px);
}
.pad-radius3 {
	transform: rotateY(-90deg) rotateX(30deg) translateZ(48px);
}
.pad-radius4 {
	transform: rotateY(-90deg) rotateX(40deg) translateZ(48px);
}
.pad-radius5 {
	transform: rotateY(-90deg) rotateX(50deg) translateZ(48px);
}
.pad-radius6 {
	transform: rotateY(-90deg) rotateX(60deg) translateZ(48px);
}
.pad-radius7 {
	transform: rotateY(-90deg) rotateX(70deg) translateZ(48px);
}
.pad-radius8 {
	transform: rotateY(-90deg) rotateX(80deg) translateZ(48px);
}
.pad-radius9 {
	transform: rotateY(-90deg) rotateX(90deg) translateZ(48px);
}

六、将各个面拼接起来

代码仓库地址：

https://github.com/shb190802/html5

演示地址：

https://suohb.com/demo/win/iphone12.html

007年，乔布斯在全球开发者大会上发布iPhone。

在发布会上，乔布斯充满自信地说：“苹果将重新定义手机”。

乔布斯先是宣布今天将发布三款产品，一部宽屏触控的iPod、一部革命性的手机、一部飞跃性的互联网设备，然后他又重复了两遍，最后在人群的呼喊中神采飞扬地说到：“你们懂了吗？它们不是相互独立，它们合三为一，我们称之为——iPhone!”

这次发布会注定是值得被铭记的伟大时刻。

2007年—2021年，苹果不断的开创-迭代-突破，发布了33款手机，相较于安卓其他厂商，苹果发布新机的频率非常克制，现在为大家回顾14年33款iPhone。

iPhone：重新发明了手机

2007年1月9日，第一代iPhone在MosconeCenter举办的Macworld2007中发布。

iPhone

iPhone的主体是一面3.5英寸触摸屏。在当3.5英寸已经是巨屏了。iPhone没有键盘，而是创新地引入了多点触控的触摸屏界面，当时在操作性上与其他品牌的手提电话相比占有领先地位。

乔布斯在发布会上也对比了其他手机

iPhone支持虚拟语音信箱、HTML电子邮件、Safari网页浏览器、YouTube等功能，第一代iPhone共计售出了6,124,000部。

iPhone 3G：AppStore开启移动互联网

2008年7月11日，苹果公司在全球22个国家及地区正式发售iPhone 3G，屏幕和处理器和iPhone 3G一致。

iPhone 3G

iPhone 3G的后盖由第一代iPhone的铝制改为了塑料制，手机的按钮则从塑料制改为了金属制。iPhone 3G推出了两种不同的颜色，分别为黑色与白色。耳机接口改为3.5毫米耳机接口，200万摄像头。

iPhone 3G增加了邮件推送、AppStore等功能，AppStore标志着苹果正式把iOS的生态建立了起来。

2008年第四季度，iPhone的总销量超越了黑莓手机，成为世界第三大手机制造商，仅次于诺基亚及三星。

iPhone 3GS：视频录制，屏幕出彩

2009年，苹果公司与中国电信运营商中国联通达成协议，苹果正式进入中国。

iPhone 3GS

6月8日iPhone 3GS发布，配备一块3.5寸多点触控屏幕。与前代iPhone相比，iPhone 3GS的屏幕由18位色升级为了24位色，这让iPhone 3 GS的屏幕能更好地表现出色彩。在同时代的手机屏幕中十分出彩，iPhone 3GS的内部结构与第一代相似，但增加了一些模块，例如3G网络、全球卫星定位系统等。

iPhone 3GS搭载了一枚320万像素摄像头，与前代iPhone比较，除了在像素上有提升外，iPhone 3GS也增加了一些相机功能，例如自动对焦、视频录制等。

iPhone 4：极致的工业设计，开启视频通话

2010年6月7日，乔布斯在WWDC中发布iPhone 4。iPhone 4是一款非常成功的手机，采用了双面玻璃机身、不锈钢中框，乔布斯称iPhone 4为世界上最薄的手机，惊艳十足。

iPhone 4

同时，iPhone 4采用了3.5英寸的Retina屏，达到了惊人的326ppi，按照乔布斯的说法，是人视网膜的水平。系统也引入了多任务功能和苹果公司新的FaceTime视频聊天服务。

iPhone 4也是第一款包含前置镜头的iPhone，也是第一款以CDMA网络版本发布的iPhone，结束AT&T作为iPhone产品于美国独家运营商的时期。自拍和视频通话进入大众的生活。

这一代也让苹果深陷“天线门”，其新的天线设计出现异常，导致手机在以某种方式手持的时候，手机将会丢失其信号，大多数人接触手机的外缘也会导致讯号强度显著下降。

iPhone 4s：Siri登场，乔布斯遗作

2011年10月4日10时在苹果总部举行的发布会，苹果公司新CEO提姆·库克在发布会上发布iPhone 4s。由于iPhone销量惊人，苹果公司成为2011年盈利最多的手机制造商，超越屹立于榜首长达十多年的诺基亚。 iPhone 4s的外观上与iPhone 4几乎相同，但iPhone 4s有更高像素（800万像素）的摄像头。

iPhone 4s

初次登场的Siri，该语音助理服务可以识别自然的人类语言。基于语音系统，iPhone 4s成为了更加智能的语音识别设备，可以通过语音控制实现天气、短信、地图查找等功能的交互。

乔布斯在发布会结束的第二天就去世了，乔布斯时代结束。

iPhone 5：4G更快，屏幕更大

2012年9月12日，苹果公司发布iPhone 5，其外观设计被重新塑造为铝材基体的三段式机身，比前代型号更薄更轻第一款苹果的4G手机， iPhone 5首次改变屏幕比例的设计，iPhone的屏幕由3.5吋增至4吋。手机屏幕的比例由3:2逐渐接近16:9。而且还首次采用了正反通用的Lightning数据接口。

iPhone 5

2013年国内的4g手机才慢慢发展起来。

iPhone 5s：指纹识别时代的开始

2013年9月10日，苹果发布两款手机，iPhone 5c及iPhone 5s，手机外观与硬体方面则首次新增金色选项，配备苹果的特色功能：双色闪光灯（TrueTone）。

iPhone 5s

搭载新一代A7处理器，并且是全球首部采用64位处理器的智能手机。配备业界最先使用的按压式指纹辨识。

iPhone 5c：最短命的iPhone

iPhone 5c是iPhone 5的换壳的版本。处理器，屏幕及镜头模组规格都与iPhone 5相同，搭配塑料机身，拥有绿，黄，红，白，蓝五色可选。售价折合人民币3300元，合约机价格只有99美元，这款机器是苹果下沉市场的一个实验品，但是大多数人宁愿多花800块去买iPhone 5s。iPhone 5c销量不及iPhone 5s的四分之一，大部分消费者不愿意买一个廉价iPhone。

iPhone 5c

iPhone 6/iPhone 6 Plus：更薄更大，销量最高

2014年9月发布iPhone 6和iPhone 6 Plus，全新的外观设计，玻璃面板的边缘是微曲的，而背后的铝质包含著两根天线的塑料条，这两根天线十分影响美感。iPhone 6的厚度为6.9mm，而iPhone 6 Plus的厚度为7.1mm；两者都比iPhone 5c和iPhone 5s更薄，使iPhone 6成为迄今为止苹果公司最薄的手机。

iPhone 6 Plus

在安卓手机的大屏的压力下，苹果选择了大屏幕，iPhone 6 Plus显示屏的尺寸为5.5英寸，抛弃了乔布斯3.5吋的黄金手感。

iPhone也首次推出的NFC功能，ApplePay功能的问世。但是中国厂商在NFC上开发了公交卡，NFC并没有在移动支付领域做大规模的推广。

iPhone 6系列是目前苹果销量最高的手机，累计销量2.2亿部。

iPhone 6s及iPhone 6s Plus：全新交互，性能大跃进

2015年9月9日，iPhone 6s及iPhone 6s Plus发布，尺寸几乎与前代保持一致，分别为4.7英寸和5.5英寸。

iPhone 6s

iPhone6s的处理器为苹果A9处理器。A9芯片比A8要快70%，图形处理能力快90%。第一个使用LPDDR4内存，存储既不是eMMC也不是UFS规范，而是NVMe，和上一代读取速度相比翻倍。处理器、内存、存储这三件套是最影响手机流畅度的，iPhone 6s得到了接近翻倍的升级。这也是iOS15仍然支持更新iPhone 6s的重要原因。

iPhone首次搭载1200万高像素镜头，把苹果影像推到了新的高度。

在交互上Phone 6s做出了第一代3DTouch，3DTouch在原有ForceTouch轻按、轻点的基础上新增了重按这一维度的功能。所以iPhone 6s的屏幕有轻点、轻按及重按这三层维度。

A9芯片的升级，使得iPhone 6s可以通过语音实时唤醒Siri。灵敏低功耗，给了手机操作第二次生命。

iPhone SE：性能强悍的小屏旗舰

2016年3月22日，苹果公司发布iPhone SE。它采用了与iPhone 5s一样的外观设计，但不同的是，iPhone SE采用了与iPhone 6s相同的A9处理器，硬件实力与iPhone 6s相当。比起iPhone 5s的A7芯片拥有2倍的CPU性能、3倍的GPU性能。

iPhone SE

iPhone 7及iPhone7 Plus：取消耳机孔

2016年9月7日，苹果公司在美国加州发布了iPhone 7和iPhone 7 Plus两款新产品。

iPhone 7和iPhone 7 Plus

相对于iPhone 6s来说外观没有大变化，背部天线的框线得以减少，显得背部很而提供新的暗色经镜面处理“亮黑色”及“黑色”，太空灰被取消，其他旧有配色“银色”、“金色”、“玫瑰金色”则维持不变，从iPhone 6s开始就有3DTouch的设计，还有回到主画面（Home）的按键也提高灵敏度，同时采用固态按键取代原来的按动式按键，并利用新的TapticEngine震动来模拟按压。

最让消费者印象深刻的是，iPhone 7系列取消了耳机接口。

iPhone 8及iPhone 8 Plus：全程陪跑

2017年9月12日苹果公司发布iPhone 8及iPhone 8 Plus。iPhone 8采用了前后双玻璃材质，并且采用了航空级铝材质，并且有着Retina显示屏；还有TureTone显示屏保证色准；采用1200万像素，采用全新的CMOS，支持光学防抖；配备1200万像素广角及长焦双镜头摄像头，支持无线充电，并加入了AR游戏。

面对万众期待的iPhone X，iPhone 8及iPhone 8 Plus甚至没有广告语。

iPhone 8

iPhone X：全面屏来了

2017年9月12日，除了发布iPhone 8系列，除此之外苹果还发布了iPhone上市十周年的纪念机款：iPhone X。

iPhone X

iPhone X 首次采用全面屏设计，异型切割的5.8吋（对角线圆弧）超视网膜显示屏（解析度458ppi）。“刘海”的设计不只是摄像头，里面还装了苹果替代指纹解锁的Face ID，面部解锁替代了指纹解锁。

也带来了全新的全面屏手势操作。

iPhone XR，iPhone XS和iPhone XS Max：比大更大

2018年9月12日，苹果公司推出了三款新设备，它们分别是：iPhone XR，iPhone XS和iPhone XS Max。

iPhone XR

iPhone XR配备一个名为LiquidRetina显示屏的6.1英寸LCD荧幕，其ppi只有326，屏幕有肉眼可见的颗粒感。iPhone XS搭载5.8英寸超视网膜显示屏，iPhone XS Max则搭载6.5英寸超视网膜显示屏。两款手机的屏幕均为OLED材质。

苹果与高通因专利问题发生纠纷后，转而使用英特尔研发的基带芯片搭载于新一代iPhone上。由于英特尔基带的性能不佳，iPhoneXs/XsMax出现信号问题。

iPhone 11系列：双卡双待，专供中国

2019年9月10日，苹果公司推出了三款新设备：iPhone 11，iPhone 11 Pro，iPhone 11 Pro Max。其中iPhone11 Pro，iPhone 11 Pro Max首次搭载了三镜头系统。

iPhone 11 Pro Max

依然是十分常规的升级，没有什么突出的优势，最显著的变化就是背部三个摄像头的排布。iPhone 11 Pro支持立体声录音功能，以及前后摄像头的人像模式及人像光效功能；后置摄像头支持4K最高60fps的视频拍摄，支持扩展动态范围拍摄。

iPhone 11全系支持双卡双待，但该功能专供中国市场，同时，iPhone 11将取消压力传感的3DTouch，由HapticTouch取而代之。另外，iPhone 11系列支持反向无线充电。将AirPod放在iPhone 11手机背面即可为AirPods无线充电。

iPhone SE (第二代)：估计是最后一代小屏

2020年4月15日，苹果公司推出了iPhone SE (第二代)。采用与iPhone 8高度相似的外观设计，内置了与iPhone11 Pro相同的A13仿生处理器。

iPhone SE（第二代）

iPhone SE（第二代）拥有4.7英寸视网膜高清显示屏，相较于iPhone 8，iPhone SE（第二代）并不支持三维触控，其只能使用触感触控进行快速操作。

iPhone 12系列：苹果首款5G，不送充电器

2020年10月13日，苹果公司推出了四款新设备：iPhone 12 mini，iPhone 12，iPhone 12 Pro和iPhone12 Pro Max。

这也是苹果第一次一次性推出4款手机。

iPhone 12系列将5.4英寸和6.1屏幕英寸，而iPhone 12 Pro系列将提供6.1英寸和6.7英寸屏幕尺寸。全系配备5nm的A14，这是iPhone首次支持5G网络。边框从弯弧边框改成和iPhone4类似的平直边框，其他方面都是常规升级。

唯一让人印象深刻的是苹果为了环保，不附带充电头。

iPhone 13系列：首次价格下调

2021年9月14日，苹果公司推出了四款手机：iPhone 13 mini，iPhone 13，iPhone 13 Pro，iPhone 13 Pro Max。

iPhone 13 Pro Max

iPhone 13系列将芯片改为采用5纳米工艺制造的A15，iPhone 13系列相较于前代缩小了萤幕缺口部分的占据面积约20%。iPhone 13系列因单颗镜头大小变大，以至于iPhone 13系列的双镜头是采用斜对角设计而非前代的垂直摆设。

在iPhone 13与iPhone 13 Pro系列首次加入电影模式(CinematicMode)，能依照场景自动调整景深，使用者拍完影片后依旧可以调整景深设定。

iPhone 13 Pro和iPhone13 Pro Max屏幕最高支持120Hz。两款显示器皆具备ProMotion技术，可让iPhone13 Pro系列屏幕刷新率进行1-120Hz的动态变化，达到省电的效果。另外，在iPhone 13与iPhone13 Pro系列首次加入电影模式(CinematicMode)，能依照场景自动调整景深，使用者拍完影片后依旧可以调整景深设定。

最重要的是iPhone 13系列的价格比上一代最高便宜1000。

iPhone部分机型价格

总结

现在没有一个人离开手机了，我们想象不到没有手机的日子会是什么样的，正如苹果在发布iPhone的14年前，很多人想象不到移动互联网是什么样子的。

乔布斯拿着一个科幻般的产品展现在大家面前，滑动解锁，屏幕被打开的一瞬间，使我相信：这，就是未来。

但是苹果很难再给大家带来惊喜了。iPhone硬件不再领先，苹果lightning接口，120Hz的刷新率，以及自我超速的25W充电功率。系统方面，iOS和安卓两家的功能互相借鉴，也没有任何新鲜感。尤其iOS上的很多新功能其实安卓的一些厂商早就上了很多年了。

自iPhone 6系列2.2亿部的巅峰销量以来，iPhone的销量也正在一个低谷期。但考虑到苹果800美元的均价，以及全球智能手机市场的饱和，苹果的表现无疑是最亮眼的。

期待苹果未来的发布会上有人这样说：我们又一次重新定义手机。

(7775457)

据模板

#查看模板生成的数据
var data = Mock.mock({
//list|1-10 数组元素个数随机范围， id|+2 属性值递增, age|20-30数值随机范围
// test|3.2-5 3.xx-3.xxxxx 整数位3，小数位位数范围为2-5
//'yourname|2-4': 'alice-' 重复字符串的次数范围2-4
//常规真实数据格式，@name @color @url @first @last
'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
'name': '@name',
'color': '@color',
'url': '@url',
'email': '@email',
'friends|3': [{name: '@name'}],
'price|10-20.2-5': 11,
'cost|10-20.3': 11,
'test|3.2-5': 52,
'yourname|2-4': 'alice-'
});
JSON.stringify(data, null, 2);
var data = Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
});
JSON.stringify(data, null, 2);
#拦截请求，返回模拟数据
var Mock.mock('http://g.cn', {
'list|3-8': [{'id|+3': 1}]
});
数据模板定义
'name|rule': value name 为属性名, rule 为规则, value 为值，属性名和生成规则之间用|分隔，生成规则的格式有7种：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value //.dmin-dmax 小数点后保留的位数范围
'name|min-max.dcount': value //小数点后保留dcount位
'name|count.dmin-dmax': value //貌似用处不大
'name|+step': value //从value递增/减

属性值可以包含占位符(如@name)，属性值指定了最终值的初始值和数据类型.
属性值是字符串 String

'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count。

属性值是数字 Number

'name|+1': 100 属性值自动加 1，初始值为 100
'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。
'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。

属性值是布尔型 Boolean

'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

属性值是对象 Object

'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
'name|count': {} 从属性值 {} 中随机选取 count 个属性。

属性值是数组 Array

'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。

属性值是数组 Function

'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。

数据占位符定义
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符的格式为：
@占位符
@占位符(参数 [, 参数])

用 @ 来标识其后的字符串是占位符。
占位符引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符也可以引用数据模板中的属性。
占位符会优先引用数据模板中的属性

{
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
}
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}

常用方法

Mock.mock( rurl?, rtype?, template|function(options) )

根据数据模板生成模拟数据。

参数的含义和默认值如下所示：

参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、'/domian/list.json'。

参数 rtype：可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

参数 template：可选。表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

参数 function(options)：可选。表示用于生成响应数据的函数。

参数 options：指向本次请求的 Ajax 选项集。

Mock.mockjax(library)

覆盖（拦截） Ajax 请求，目前内置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”，引用格式为 @占位符(参数 [, 参数]) 。

Mock.tpl(input, options, helpers, partials)

基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。

在线咨询

上一篇：html基础标签大全（网页开发基础）
下一篇：什么是HTML？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS-画一个iPhone12

您的项目需求