Realize mobile interface simulation function on PC
Tags: h5, diversity, css5, javascript
Published: 2023-12-22 08:09:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk38gy7o5o6h0ganrdms.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w84fu4rqmxwqotj32rn8.jpeg)


Front-end function implements video playback link:

https://ludesala.blogspot.com/2023/11/realize-mobile-interface-simulation.html



顶端左边时间： 

功能描述：分（如果输入的不是数字，提示：请输入数字，如果输入的数字大于60时，提示：请输入 0 -59 ），

功能描述：时（如果输入的不是数字，提示：请输入数字，如果输入的数字大于24时，提示：请输入 0 -23）



顶端右边：

功能说明： wifi ，手机模拟信号 ，电池电量 （JS 动态自动更新）



页面内容时间：  

功能描述：分 （如果输入的不是数字，提示：请输入数字，如果输入的数字大于60时，提示：

请输入 0 -59 ），

功能描述：时：（如果输入的不是数字，提示：请输入数字，如果输入的数字大于24时，提】

示：请输入 0 -23）

功能描述：  账号 （如果输入的不是数字，提示：请输入数字，）



页面内容日期 ：日，月 ，年

功能描述： 日  （如果输入的不是数字，提示：请输入数字，如果输入的数字大于31时，提

示：请输入01 – 31天 ），

功能描述：月  （如果输入的不是数字，提示：请输入数字，如果输入的数字大于12时，提

示：请输入01 – 12月 ），

功能描述：年 （如果输入的不是数字，提示：请输入数字  ），

 

页面内容金额：

功能描述：（如果输入的不是数字，提示：请输入数字，  输入的数字自动+5）



页面内容蒙板：   

功能描述：页面右下角浮动框 ， 竖向滑动条  蒙板高度可调整 （值为：百分比 ）



页面生产PNG 图片

功能描述：页面右下角浮动框 ， 图片按钮，点击图片按钮 会将整个html 页面生成png图 （除去 右下角浮动框 不在生成图片范围内）



Top left time:

Function description: Minutes (if the entered number is not a number, prompt: please enter a number, if the entered number is greater than 60, prompt: please enter 0 -59),

Function description: (if the input is not a number, prompt: please enter a number, if the entered number is greater than 24, prompt: please enter 0-23)



Top right:

Function description: wifi, mobile phone analog signal, battery power (JS dynamic automatic update)

Page content time:

Function description: Minutes (If the entered number is not a number, the prompt is: Please enter a number. If the entered number is greater than 60, the prompt is:

Please enter 0-59),

Function description: (If the entered number is not a number, prompt: Please enter a number, if the entered number is greater than 24, prompt]

Display: Please enter 0-23)

Function description: Account (if the input is not a number, prompt: please enter a number,)



Page content date: day, month, year

Function description: Day (if the entered number is not a number, prompt: Please enter a number, if the entered number is greater than 31, prompt



Display: Please enter 01 – 31 days),



Function description: Month (If the entered number is not a number, prompt: Please enter a number. If the entered number is greater than 12, prompt



Instructions: Please enter 01 – December),



Function description: year (if the input is not a number, prompt: please enter a number),



Page content amount:

Function description: (If the input is not a number, prompt: Please enter a number, the entered number will automatically +5)

Page content mask:

Function description: Floating box in the lower right corner of the page, vertical slider, mask height adjustable (value: percentage)



Page Production PNG Image

Function description: There is a floating box in the lower right corner of the page and a picture button. Clicking the picture button will generate a png image of the entire html page (except for the floating box in the lower right corner, which is not within the scope of the generated image)