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

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

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

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

  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title></title>
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <script src="js/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12. 定义日期字段
  13. <input type="date" id="myDate"/>
  14. </body>
  15. <script>
  16. $(document).ready(function(){
  17. var date = new Date();
  18. var myDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
              //这里的myDate的格式一定要是"year-month-day"
  19. console.log(myDate);
  20. $("#myDate").val(myDate); //将当前日期赋值给input
  21. $("#myDate").change(function(){ //这个函数我是为了将input的结果输出来
  22. var val = $("#myDate").val();
  23. console.log(val);
  24.  
  25. })
  26. })
  27.  
  28. </script>
  29. </html>

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

  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title></title>
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <script src="js/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <br />
  14. 定义日期字段的时、分、秒(带有 time 控件)
  15. <input type="time" id="myTime"/>
  16. </body>
  17. <script>
  18. $(document).ready(function(){
  19. var date = new Date();
  20. var myTime = date.getHours() + ":" + (date.getMinutes());
              //这里的myTime 的"格式一定要是 hours:minutes"
  21. console.log(myTime);
  22. $("#myTime").val(myTime);
  23. $("#myTime").change(function(){
  24. var val = $("#myTime").val();
  25. console.log(val);
  26.  
  27. })
  28. })
  29.  
  30. </script>
  31. </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. css.day05

    1. 外边距合并  不是bug  而是一个特性  (以最大的那个边距为准) 两个盒子是并列关系 两个盒子 父子级关系 1. border 2.overflow:hidden; 3. padding  ...

  2. Asp.net 主题 【2】

    通常我们经常看到网页,一些软件提供换肤功能,各种主题间切换.ASP.NET 2.0 中可以用Theme和skin以及CSS轻松实现这个功能. 首先简单介绍一下三种技术:主题(Theme)技术,面板(s ...

  3. mysql 数据库查询与实例。

    资料是从教材弄下来的,加上了我的理解.主要内容是练习实例,在写博文中学习命令行,当然也希望这篇博文能帮助其他人学习mysq数据库命令 SELECT 语句可以从一个或多个表中选取特定的行和列 SELEC ...

  4. spring 入门笔记(一)

    最近学习spring 通过笔记形式加深自己对spring的理解,也希望能跟各位入门者分享和讨论. 一.下载spring 下载spring也费了不少功夫,目前还没从spring官网找到下载入口,我从下面 ...

  5. DIV隐藏与重显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. hdu1405 第六周J题(质因数分解)

    J - 数论,质因数分解 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Desc ...

  7. UVA 1600 Patrol Robot(机器人穿越障碍最短路线BFS)

    UVA 1600 Patrol Robot   Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   ...

  8. IIS6中ASP.NET实现对静态文件的授权控制

    后台使用html+ashx+js开发 在VS2008调试并未发现问题 发布到IIS6才发现不需要验证也能访问html文件 解决这个问题配置IIS即可了 方法如下: IIS配置:网站->属性-&g ...

  9. Yii2——MYSQL操作

    先创建连接对象 $connection = new \yii\db\Connection([ 'dsn' => $dsn, 'username' => $username, 'passwo ...

  10. linux kernel

    first step. http://www.cyberciti.biz/faq/howto-install-kernel-headers-package/ http://uliweb.clkg.or ...