二狗在最近的项目以html5和webapp为主，并接触到了input新增type值的使用，下面就把这些玩意一一以实例列举出来

一：type = date:定义日期：年-月-日

input type="date"可以获取年月日的值，也可以给它的value设置自定义的值哦。

注意：如果你想给input设置你自定义的value值，自定义的值的格式 一定要和input type=date的格式 一样才行。

<!doctype html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="js/jquery.js"></script>

	</head>

	<body>

		定义日期字段

		<input type="date" id="myDate"/>

	</body>

	<script>

	$(document).ready(function(){

		var date = new Date();

		var myDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
　　　　　　　　　　//这里的myDate的格式一定要是"year-month-day"

		console.log(myDate);

		$("#myDate").val(myDate);  //将当前日期赋值给input

		$("#myDate").change(function(){  //这个函数我是为了将input的结果输出来

			var val = $("#myDate").val();

			console.log(val);   

		})

	})

	</script>

</html>

二：一：type = time:定义时间：时:分

<!doctype html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="js/jquery.js"></script>

	</head>

	<body>

		<br />

		定义日期字段的时、分、秒（带有 time 控件）

		<input type="time" id="myTime"/>

	</body>

	<script>

	$(document).ready(function(){

		var date = new Date();

		var myTime = date.getHours() + ":" + (date.getMinutes());
　　　　　　　　　　//这里的myTime 的"格式一定要是 hours:minutes"

		console.log(myTime);

		$("#myTime").val(myTime);

		$("#myTime").change(function(){

			var val = $("#myTime").val();

			console.log(val);

		})

	})

	</script>

</html>

　　

　

html5中input新增type值的使用的更多相关文章

  1. html5中input的type类型有哪些（总结）

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  2. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  3. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  4. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  5. 笔记：HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  6. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  7. Jquery中input：type=radio的监听，获取设置值

    一.html <div id='demo'> <input type='radio' name='sex' value='男' > <input type='radio' ...

  8. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

随机推荐

  1. “死锁” 与 python多线程之threading模块下的锁机制

    一:死锁 在死锁之前需要先了解的概念是“可抢占资源”与“不可抢占资源”[此处的资源可以是硬件设备也可以是一组信息],因为死锁是与不可抢占资源有关的. 可抢占资源:可以从拥有他的进程中抢占而不会发生副作 ...

  2. C语言零移位操作

    给定一个整形数组要求把其中的零元素移动到数组的末尾 非零元顺序保持不变 以下采用两种方法实现 #include <stdlib.h> #include <stdio.h> #i ...

  3. jquery find选择器在不同浏览器下的差异

    初步测试,5000个节点的隐藏. 代码如下: <!doctype html> <html lang="en"> <head> <scrip ...

  4. mktime性能问题

    #include <time.h> int main() { for (int i = 0; i < 100000; ++i) { struct tm tm = {}; tm.tm_ ...

  5. CSS3中更灵活的布局方式

    flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然 ...

  6. HTML5验证及日期显示

    以前忽略了HTML5的强大功能,谁知有了它数据大部分都不需要自己验证,显示日历也不需要插件啦,一些小功能分享给大家 1.Email输入框,自动验证Email有效性. <!DOCTYPE HTML ...

  7. JS判断鼠标从哪个方向进入DIV容器

    写的不够高大上 , 不要介意哦... Js: //进去 $(".flash").bind("mouseenter",function(e){ /** the w ...

  8. 【行为型】Visitor模式

    访问者模式意图在不改变目标对象类结构的情况下,扩展对象类的行为.新扩展的行为均被封装成类对象的形式来动作.应用该模式时,往往目标类系与Visitor类系是两个不同的类系,它们配合工作但维护是分开的,互 ...

  9. Egret 文本处理

    常规处理: private createGameScene():void { var shp = new egret.Shape(); shp.graphics.beginFill(0xff0000, ...

  10. java线程同步问题

    Java面试当中,线程可以说是必考内容,在看面试题的时候发现一遍很全的讲解Java面试题的博客:http://blog.csdn.net/csh624366188/article/details/80 ...