不一般的自定义时间（html+css+js）

自定义时间

写文章的因

关于要写这篇文章的原因

  • 是记录在工作上遇到的困难需求，
  • 是希望能给大家提供一些解决问题的思路

接下来我描述这个需求的多样性，难点在哪。

  • 勾选勾选框开始时间与结束时间默认显示昨天与今天。
  • 取消勾选框开始时间与结束时间清空。
  • 选择开始时间，勾选框勾选，结束时间为今天。
    在用户点击 开始时间大于或者等于结束时间时，
    提示错误信息，开始时间清空，
    选择结束时间时，小于或者等于开始时间，
    显示报错，结束时间清空。
  • 选择结束时间，勾选框勾选，开始时间
    为所选结束时间的昨天。
    在用户点击结束时间小于或者等于结束时间时，
    提示错误信息，结束时间清空，
    选择开始时间时，大于或者等于开始时间，
    显示报错，开始时间清空。
  • 其次在每次选择时间的时候都要计算出开始时间与结束时间。
  • 用户不能选择限制范围之外的时间

请添加图片描述

1.效果演示

自定义时间效果展示

2.思路解析

2.1编写html

该部分比较简单，就一个错误提示div
一段文字，一个勾选框，两个时间选择框

<div id="errorMsg" style="color:red;margin-top:10px;margin-bottom:20px"></div><div><label for="select_time">自定义文件修改时间：</label><input type="checkbox" name="select_time" id='selectTime' onchange="changeStatus(event)" id="selectTime"><input type="date"  id='startTime' ref="startTime" onchange="getstartTime(event)" max=""> ---<input type="date" ref="endTime" id="endTime" onchange="getEndTime(event)" max=""></div>

2.2编写自动得到当前时间的函数

这里的难点是在日期框显示‘yyyy-mm-dd’，
就需要对获取到的值进行处理，

 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1);//获取当前月份的日期 var d = dd.getDate(); if(m>=10&&m>=10){return y+"-"+m+"-"+d; }else if(m<10&&d>=10){return y+"-"+'0'+m+"-"+d; }else if(m<10&&d<10){return y+"-"+'0'+m+"-"+'0'+d; } }

2.3限制用户选择日期

该功能通过给input添加一个max属性即可，
但是该max属性值必须是max='yyyy-mm-dd’的形式。

window.onload=function(){document.getElementById('startTime').setAttribute('max',this.GetDateStr(-1))document.getElementById('endTime').setAttribute('max',this.GetDateStr(0))    
}

2.4关于时间的计算

时间的计算问题，因为我们通过Date.parse（）
格式化时间得到的时间是东八区的时间，要想得到
零点的时间需要减去8个小时。
开始时间等于start=Date.parse（‘yyyy-mm-dd’)/1000-83600
结束时间等于end=Date.parse（‘yyyy-mm-dd’)/1000+163600
因为我们需要的时间是昨天的零点，以及今天的24点

  //得到时间为svar  modification_time_start=null,modification_time_end=null,modification_time_start=Date.parse(this.GetDateStr(-1)) / 1000-8*3600modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600

2.5用户选择开始时间

当用户选择开始时间，结束时间调用 GetDateStr（）并赋值。
勾选框勾选，给该元素设置属性checked为true。
然后就是对开始时间与结束时间的判断来决定
是否显示错误提示，以及清空开始框。

function getstartTime() {$('#selectTime').attr('checked',true)//给勾选框添加属性，让其处于勾选状态$('#selectTime').prop('checked',true)modification_time_start = Date.parse($('#startTime').val())/1000-8*3600// 用户只选中开始时间，结束时间默认为当前时间。并重新赋值if(count||modification_time_end===null){document.getElementById('endTime').value=this.GetDateStr(0)count=!count}if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}// document.getElementById('endTime').value=this.GetDateStr(0)document.getElementById('startTime').value=$('#startTime').val()modification_time_end= Date.parse($('#endTime').val())/1000+16*3600if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间大于结束时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间大于或等于结束时间，请重新选择时间'document.getElementById('startTime').value=''document.getElementById('endTime').value=$('#endTime').val()}else{document.getElementById('errorMsg').innerText=''}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}

2.6用户选择开始时间

当用户选择结束时间，结束时间调用 GetDateStr（）并赋值。
勾选框勾选，给该元素设置属性checked为true。
然后就是对开始时间与结束时间的判断来决定
是否显示错误提示，以及清空结束时间框。

 function getEndTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)      modification_time_end = Date.parse($('#endTime').val())/1000+16*3600document.getElementById('endTime').value=$('#endTime').val()modification_time_start= Date.parse($('#startTime').val())/1000-8*3600if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}//当用户只选中最后时间时，开始时间应该有个默认值。该最后时间的前一天，重新给开始时间赋值 if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间小于开始时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间小于或等于开始时间，请重新选择时间'document.getElementById('endTime').value=''document.getElementById('startTime').value=$('#startTime').val()}else{document.getElementById('errorMsg').innerText=''}if(count){let date=new Date(Date.parse($('#endTime').val())-24*3600*1000)Y = date.getFullYear() + '-'M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'D = (date.getDate()< 10 ? '0'+date.getDate() : date.getDate())document.getElementById('startTime').value=Y+M+Dmodification_time_start=Date.parse(Y+M+D)/1000-8*3600count=!count}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}

2.7总结

在该需求中，我们学到了那些内容

  • 计算时间的准确性（开始时间的0点，结束时间的24点）以及关于使用Date.parse（‘yyyy-mm-dd’）的值为东八区的值。
    +怎么得到当前时间，以及怎么将该值赋值到日期框中document.getElementById(‘startTime’).value=‘yyyy-mm-dd’,
  • 通过jquery改变勾选框的勾选状态$(‘#selectTime’).attr(‘checked’,true) $(‘#selectTime’).prop(‘checked’,true)

3.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body><div id="errorMsg" style="color:red;margin-top:10px;margin-bottom:20px"></div><div><label for="select_time">自定义文件修改时间：</label><input type="checkbox" name="select_time" id='selectTime' onchange="changeStatus(event)" id="selectTime"><input type="date"  id='startTime' ref="startTime" onchange="getstartTime(event)" max=""> ---<input type="date" ref="endTime" id="endTime" onchange="getEndTime(event)" max=""></div><script>var  modification_time_start=null,modification_time_end=null,count=truefunction GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1);//获取当前月份的日期 var d = dd.getDate(); if(m>=10&&m>=10){return y+"-"+m+"-"+d; }else if(m<10&&d>=10){return y+"-"+'0'+m+"-"+d; }else if(m<10&&d<10){return y+"-"+'0'+m+"-"+'0'+d; } }window.onload=function(){document.getElementById('startTime').setAttribute('max',this.GetDateStr(-1))document.getElementById('endTime').setAttribute('max',this.GetDateStr(0))    }function changeStatus(event) {if (event.target.checked) {modification_time_start=Date.parse(this.GetDateStr(-1)) / 1000-8*3600modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600document.getElementById('startTime').value = this.GetDateStr(-1)document.getElementById('endTime').value = this.GetDateStr(0)console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}else{document.getElementById('startTime').value =nulldocument.getElementById('endTime').value=nullmodification_time_end=nullmodification_time_start=null}}function getstartTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)modification_time_start = Date.parse($('#startTime').val())/1000-8*3600// 用户只选中开始时间，结束时间默认为当前时间。并重新赋值if(count||modification_time_end===null){document.getElementById('endTime').value=this.GetDateStr(0)count=!count}if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}// document.getElementById('endTime').value=this.GetDateStr(0)document.getElementById('startTime').value=$('#startTime').val()modification_time_end= Date.parse($('#endTime').val())/1000+16*3600if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间大于结束时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间大于或等于结束时间，请重新选择时间'document.getElementById('startTime').value=''document.getElementById('endTime').value=$('#endTime').val()}else{document.getElementById('errorMsg').innerText=''}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}function getEndTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)      modification_time_end = Date.parse($('#endTime').val())/1000+16*3600document.getElementById('endTime').value=$('#endTime').val()modification_time_start= Date.parse($('#startTime').val())/1000-8*3600if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}//当用户只选中最后时间时，开始时间应该有个默认值。该最后时间的前一天，重新给开始时间赋值 if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间小于开始时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间小于或等于开始时间，请重新选择时间'document.getElementById('endTime').value=''document.getElementById('startTime').value=$('#startTime').val()}else{document.getElementById('errorMsg').innerText=''}if(count){let date=new Date(Date.parse($('#endTime').val())-24*3600*1000)Y = date.getFullYear() + '-'M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'D = (date.getDate()< 10 ? '0'+date.getDate() : date.getDate())document.getElementById('startTime').value=Y+M+Dmodification_time_start=Date.parse(Y+M+D)/1000-8*3600count=!count}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}</script>
</body>
</html>

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
希望能给博主点赞哎🎨，评论🧶，收藏🥼三连一波加粗样式

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/66163.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

camera hal｜如何学习一个新平台

camera hal｜如何学习一个新平台

全网最具价值的Android Camera开发学习系列资料~ 作者：8年Android Camera开发，从Camera app一直做到Hal和驱动~ 欢迎订阅，相信能扩展你的知识面，提升个人能力~ 我自己目前从事的是android camera hal 的工作，工作上接触到的芯片平台要么是高通的，要么是mtk的。 其实…
阅读更多...
面试热题（回文链表）

面试热题（回文链表）

给定一个链表的 头节点 head &#xff0c;请判断其是否为回文链表。 如果一个链表是回文&#xff0c;那么链表节点序列从前往后看和从后往前看是相同的。 回文链表类似于回文串&#xff0c;正读倒读的顺序是一样的&#xff0c;那么我们怎么去判断一个链表是否是回文链表呢&…
阅读更多...
书单背景图片素材哪里找？这个工具赶紧用起来

书单背景图片素材哪里找？这个工具赶紧用起来

好的文案是很重要的&#xff0c;但是如何找到好的文案却是一件很困难的事情。以下是一些可以寻找好的文案的方法分析&#xff0c;以及如何把书单文章转到视频的操作分享。 1.书籍和杂志&#xff1a;阅读关于广告、营销、文案和创意的书籍和杂志可以帮助你了解不同的文案类型和风…
阅读更多...
【创作纪念日】我的2周年创作纪念日

【创作纪念日】我的2周年创作纪念日

创作者的探索与共鸣&#xff1a;用文字创造无限可能 在这特别的时刻&#xff0c;我想对你们说几句话。首先&#xff0c;我衷心感谢你们对我的支持和鼓励。正是因为你们的存在和关注&#xff0c;我才能够坚持不懈地创作和分享。 每一次写作都是一次心灵的倾诉和思想的交流。无论…
阅读更多...
【Linux】创建普通用户以及Linux问题解决

【Linux】创建普通用户以及Linux问题解决

创建普通用户 ❓可以看到我们现在是一个root用户&#xff0c;并不是一个普通用户&#xff0c;我们要如何创建普通用户呢&#xff1f; adduser 你的用户名passwd 你的用户名&#x1f525;注意这里passwd设置密码的时候&#xff0c;你输入密码电脑不会显示 删除普通用户 userd…
阅读更多...
即将发布的 Kibana 版本可运行 Node.js 18

即将发布的 Kibana 版本可运行 Node.js 18

作者&#xff1a;Thomas Watson Kibana 构建在 Node.js 框架之上。 为了确保每个 Kibana 版本的稳定性和使用寿命&#xff0c;我们始终将捆绑的 Node.js 二进制文件保持为最新的最新长期支持 (LTS) 版本。 当 Node.js 版本 18 升级到 LTS 时&#xff0c;我们开始将 Kibana 升级…
阅读更多...
uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

一、效果&#xff1a; 如下图所示&#xff0c;进入该页面后&#xff0c;默认选中第一个分类&#xff0c;以及第一个分类下的列表数据。 二、代码实现&#xff1a; 关键代码&#xff1a; 进入页面时&#xff0c;默认调用分类的接口&#xff0c;在分类接口里做判断&#xff…
阅读更多...
O2OA (翱途) o2server 调用 webServices jaxws 样例

O2OA (翱途) o2server 调用 webServices jaxws 样例

本文分两部分介绍如何在 o2server 服务器中调用 webServices(jaxws)服务. 第一部分介绍如何在tomcat上搭建一个webServices(jaxws)服务. 第二部分介绍如何在o2server服务器上来调用上面创建的服务. O2OA (翱途)官网&#xff1a;http://www.o2oa.net 一、在tomcat上搭建一个…
阅读更多...
TransNetR：用于多中心分布外测试的息肉分割的基于transformer的残差网络

TransNetR：用于多中心分布外测试的息肉分割的基于transformer的残差网络

TransNetR Transformer-based Residual Network for Polyp Segmentation with Multi-Center Out-of-Distribution Testing 阅读笔记 1. 论文名称 《TransNetR Transformer-based Residual Network for Polyp Segmentation with Multi-Center Out-of-Distribution Testing》 用…
阅读更多...
考虑分布式电源的配电网无功优化问题研究（Matlab代码实现）

考虑分布式电源的配电网无功优化问题研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
WebApIs 第五天

WebApIs 第五天

window对象 BOM&#xff08;浏览器对象模型&#xff09;定时器-延时函数JS执行机制location对象navigator对象histroy对象 本地存储 一.BOM&#xff08;浏览器对象模型&#xff09; ① BOM是浏览器对象模型 window 对象是一个全局对象&#xff0c;也可以说是JavaScript中的…
阅读更多...
LangChain-ChatGLM在WIndows10下的部署

LangChain-ChatGLM在WIndows10下的部署

LangChain-ChatGLM在WIndows10下的部署 参考资料 1、LangChain ChatGLM2-6B 搭建个人专属知识库中的LangChain ChatGLM2-6B 构建知识库这一节&#xff1a;基本的逻辑和步骤是对的&#xff0c;但要根据Windows和现状做很多调整。 2、没有动过model_config.py中的“LORA_MOD…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023