DEV Community

Cover image for Realize mobile interface simulation function on PC
ouyangzetao
ouyangzetao

Posted on

Realize mobile interface simulation function on PC

Image description

Image description

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)

Top comments (1)

Collapse
 
ouyangzetao profile image
ouyangzetao

Share it with your friends, I hope it can help you