HTML5 input type = date 设置最大最小日期

们经常在设置生日的时候需要设置最大不能今天，年龄不能超过60岁等等；其实可以很简单就判断了；

<script>
	$(function () {		
	
		var date_now = new Date();
		//得到当前年份
		var year = date_now.getFullYear();
		//得到当前月份
		//注：
		// 1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
		// 2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
		var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
		//得到当前日子（多少号）
		var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
		//设置input标签的max属性
		$("#birthday").attr("max",year+"-"+month+"-"+date);
		//$("#birthday").attr("min",(year-59)+"-"+month+"-"+date);
		$("#birthday").attr("min",(year-59)+"-01-01");
	});
</script>

下面是HTML 标签

<div class="col-xs-12 col-sm-3">出生年月日<em>*</em> <input type="date" name="birthday" id="birthday" class="form-control" required /></div>

日期输入类型还有一些其它属性需要注意。

属性描述值这是HTML里input元素的通用属性。就是输入框里的数据。
min日期或时间的最小值
max日期或时间的最大值
step步长。
不同的类型有不同的缺省步长。Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分钟
DateTime – 缺省是1分钟
Local DateTime – 缺省是1分钟

本地日期时间(<input type="datetime-local"/>)

日期+时间(<input type="datetime"/>) 支持不是很好，建议使用datetime-local

时间(<input type="time"/>)

月份(<input type="month"/>)

周(<input type="week"/>)

日期(<input type="date"/>)

源：江西日报-江西新闻客户端

江西新闻客户端讯（江西日报记者徐国平通讯员简文江）为了庆祝新中国成立71周年，培养少先队员民族自豪感，9月30日上午，新余高新三小开展了“月儿圆，红旗展，我和祖国心相连”为主题的诗歌诵读会活动。

活动伊始，全校学生统一着装，排着整齐的队伍来到操场。老师们精心设计的“祖国生日快乐”队形字样，在碧绿的操场上大气而整齐地排开。本次活动诵读的内容选自《长征组歌》，学校以年级为单位，分别由各位校领导领诵，全校师生3000余人激情澎湃地诵读了《告别》《突破封锁线》等诗歌。孩子们重温了红色经典，追忆着先烈事迹。最后，全校师生一同喊出对祖国的祝福：“祖国生日快乐！”五彩的气球随着全校师生的祝福，在太阳的辉映下冉冉升起。

此次活动的开展，不仅激发了学生的爱国主义情感，增强了全校师生的集体荣誉感，是一次鲜活的思想政治教育课！

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

象一下，你正在为你的朋友举办一个生日聚会，他非常喜欢音乐视频。你想要给他一个特别的惊喜：在聚会期间播放一个由他最喜欢的音乐视频组成的串烧。为了让这个视觉体验更加完美，你需要确保在视频之间进行平滑切换，避免任何尴尬的停顿。幸运的是，你有一些 HTML 和 JavaScript 的基础知识，所以你决定用这些技能来制作一个自定义的视频播放器，实现无缝切换。

在本文中，我们将展示如何使用 JavaScript 和 HTML5 的 <video> 标签在不同视频之间实现平滑过渡，让你可以为你的朋友创造一个令人难忘的音乐视频串烧。

要实现视频播放中断切换并顺利过渡，可以使用 JavaScript 以及 HTML5 的 <video> 标签来实现。以下是一个基本的示例，展示了如何在两个视频之间平滑切换。

首先，我们需要在 HTML 文件中创建两个视频标签：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #videoContainer {
        position: relative;
      }

      video {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="videoContainer">
      <br>
    		<button onclick="myFunction()" style="width: 80px;height: 30px;">Click me</button>
    	<br>
      <video id="video2" width="640" height="360" preload="auto">
        <source src="video2.mp4" type="video/mp4" />
      </video>
      <video id="video1" width="640" height="360" preload="auto">
        <source src="video1.mp4" type="video/mp4" />
      </video>
    </div>
    <script src="script.js"></script>
  </body>
</html>

然后，我们需要创建一个 JavaScript 文件（如 script.js），并编写以下代码：

const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');

// 当第一个视频播放完毕时触发
video1.onended = () => {
  // 隐藏第一个视频
  video1.style.opacity = 0;
    video2.style.opacity = 1;
  // 开始播放第二个视频
  video2.play();
};

function myFunction() {
    // ：播放第一个视频
    video1.play();
  }

在此示例中，当第一个视频播放完毕时，我们将其隐藏并开始播放第二个视频。这样可以实现在两个视频之间平滑切换。请注意，此示例仅在视频结束时切换，如果需要在特定时间点或根据其他条件进行切换，可以修改代码以适应需求。

如果你希望在视频切换时有更丝滑的过渡效果，可以尝试使用 CSS 动画。例如，在 JavaScript 中添加以下代码：

// 定义一个用于执行过渡动画的函数
function fadeTransition(videoOut, videoIn, duration) {
  videoOut.style.transition = `opacity ${duration}ms`;
    videoOut.style.opacity = 0;
  
    videoIn.style.opacity = 1;
    videoIn.play();
    
    setTimeout(() => {
       videoOut.style.display = 'none';
       videoOut.style.opacity = 1;
       videoOut.style.transition = '';

      
     }, duration);
}

// 修改 onended 事件处理程序
video1.onended = () => {
  fadeTransition(video1, video2, 500);
};

这段代码定义了一个 fadeTransition 函数，该函数会渐隐当前播放的视频并播放下一个视频。在这个例子中，我们在第一个视频结束时调用该函数，实现了两个视频之间的平滑过渡。

但是实际操作中，似乎没有动画的时候，感觉反而更流畅，这个就需要反复调试测试了。

在线咨询

上一篇：Html+CSS小案例项目：CSS开发小米商城电商产品展示效果
下一篇：Html+CSS - 1段CSS让表格更漂亮建议收藏

您的项目需求

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

整合营销服务商

HTML5 input type = date 设置最大最小日期

您的项目需求