js日期控件 (补助计算器页面)

简介: js日期控件 (补助计算器页面)


记录最近在搞的一个单页面计算器。主要坑点在于日期控件。还有一开始我用px 单位。在安卓平板显示偏小,所以用rem来代替。设置html中的 font-size 大小就可以等比例缩放了。

   首先呢,我开发的这个页面的是 vue模版,用CDN 引入vue 依赖,然后提供给安卓平台使用的。安卓端,用webview 显示我的页面。 


  一开始我用 <input type='date'> 这个来显示和使用日期控件的。在安卓 webview 使用的时候,会调用安卓的日期控件。坑点一,这样的日期控件字体太小,而且居左显示了,安卓开发人员无法调大字体和调位置。所以这个放弃了。 


  本来想省事,结果没得逞,那就改用iview 的日期控件,这里显示的字体图标,我在github下载对应的iconfont.css,iconfont.svg,iconfont.ttf,iconfont.woff 等文件。   在chrome 显示良好,在安卓平台调用的时候,触发了input事件,把键盘弹出来了。input 封装在 iview 的日期控件<DatePicker> 里面,不好折腾,还有iview 也不适配移动端。又放弃了。


找一个适配移动端的ui框架, 有 vant.ui ,weui,mint.ui 等等  ,mint-ui用的次数比较多,所以选这个。用CDN 引入css, js 文件等。这是一个滚轮的方式的。一开始 UI觉得也可以。先用着。隔天来个图,把这个推翻了。又要找日期控件了。

在网上找了 ,layui 的一个 laydate 日期控件,这个是用js是实现的,可以绑定在div上,这样就不用对input作处理,兼容性好。美观。 使用简单。所以就用这个了。

传送门 https://www.layui.com/laydate/

如下:
image.png

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
113 2
前端JS读取文件内容并展示到页面上
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
63 4
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
77 2
|
3月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
34 1
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
66 0
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
38 0
|
2月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
40 0
|
3月前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中