H5新标签元素学习笔记

原创 2015年11月11日 21:09:38

1、新表单元素

      全部都是由input标签组成
      1.1 email
      1.2 url
            注意:输入的内容必须以http://
      1.3 search
      1.4 range
            范围
   属性:
        min : 最小值
max : 最大值
step : 步长
value : 值
      1.5 number
            属性:
        min : 最小值
max : 最大值
step : 步长
value : 值
      1.6 color
            通过windows的调色板选取颜色


      1.7 date
            弹出日历控件,选择年月日
   值:2015-06-01
      1.8 month
            2015-06
      1.9 week
            2015-W13
      1.10 datetime
            2015-06-01T01:15Z
      1.11 datetime-local


2、新表单属性

     2.1 required
           必须的,非空验证
  <input type="text" required="false" />
     2.2 multiple
           在一个表单元素中,允许录入多段类型相同的数据,但必须由","作为分隔符
     2.3 pattern 
           根据用户指定的正则表达式,对数据进行验证
     2.4 autofocus
           自动获取焦点
     2.5 form 
           在表单之外,提交表单元素
  <form id="frm"></form>
  <input type="text" form="frm" />
     2.6 placeholder
           网页加载时,表单元素上会默认显示一段文字
  注意:只有在用户录入数据时,placeholder的值才会消失

3、新表单元素(显示数据)

     3.1 datalist
           构建一个数据列表,可以提供给文本框类型的控件使用
  <option value="">Display</option>
  <option value="" label="Display" />


  与datalist相关联:
  <input type="text" list="datalistId" />
     3.2 progress
           进度条控件
  max : 进度完成后的值
  value : 当前的进度值
  注意:多数情况下要与 setInterval 或 setTimeout联用
     3.3 meter
           刻度表
  min :设置整个刻度的下限值
  max
  value
  low : 设定合理范围下限值,大于等于min
  high : 设定合理范围上限值,小于等于 max
  optimum : 设置最佳位置值
     3.4 output
           用于显示表单元素间所计算得到的值
  for:关联相互计算的控件id值
  value : 显示的值


  Application Programming Interface


======================================

1、setCustomValidity()

     1.1 作用
           自定义错误信息
  一旦设置好了setCustomValidity(),当前表单是不允许被提交的,一旦提交,显示自定义错误信息
     1.2 注意
           setCustomValidity("")
  一旦数据被修改正确后,需要通过  setCustomValidity("") 清空错误验证消息,使得表单允许被提交

2、checkValidity()

      2.1 作用
            在不提交表单的情况下对表单或者表单元素进行验证
   如果有问题的话 , 返回值为  false
   如果没有问题  , 返回值为 true

3、invalid 事件

      表单在提交过程中,检测到有无效域时,所激发的事件,该事件的本质是获取产生错误的那一组元素


      2.1 如何使用
            document.forms[0].addEventListener("invalid",form_invalid,true);


   function form_invalid(e){
var elem = e.target; // 产生错误的元素
//调整elem
   }

4、ValidateState

      表示指定的表单元素能够出现所有的错误状态
      2.1 如何获取ValidateState
            formElement.validity;
      2.2 错误状态值
            1、判断是否通过所有的验证规则
         formElement.validity.valid
 通过所有的验证后,返回值为true,否则为false
 与checkValidity( ) 类似
   2、判断是否为空 
         formElement.validity.valueMissing
 注意:验证有required属性的控件,值是否为空
 值为空,返回 true。否则为false
   3、判断数据是否违反类型
         formElement.validity.typeMismatch
 看输入的数据,与 type属性是否相符,如果不符返回为true,否则返回false
   4、判断数据是否违反pattern属性的约束
         formElement.validity.patternMismatch
 违反 为 true, 否则为false
   5、判断数据是否违反了定义的step
        多数使用在<input type=number />类型上
formElement.validity.stepMismatch
违反 为 true, 否则为false
  6、输入的数据长度超出了maxlength所定义的长度
       formElement.validity.tooLong

           7、输入的值小于定义的min值
        formElement.validity.rangeUnderflow
  8、输入的值大于定义的max值
        formElement.validity.rangeOverflow
  9、判断表单元素是否已经设置了自定义错误消息
        formElement.validity.customError


formElement.setCustomValidity("格式不正确")
formElement.validity.customError ; 返回值为true


formElement.setCustomValidity("")
formElement.validity.customError ; 返回值为false




======================================

1、h5之前播放视频

     <embed src=""> 标签
     <object> 标签
      <object>
          <param />
 <param />
      </object>

 2、video

      2.1 
           <video src="abc.mp4"></video>
      2.2 
           <video>
       <source src="abc.swf" />
<source src="abc.mp4" />
  </video>

3、编程实现视频播放器

     step 1 :  
                实现视图界面
     step 2 :
                完成播放/暂停的功能
play()
pause()
按钮文字切换
     step 3:
                3.1 完成滚动条的自然滚动
     currentTime : 播放的时长
     duration : 视频总时长


     maxim : 600
     size : 待求


     currentTime / duration = size / maxim

    
     size = currentTime / duration * maxim;
3.2 手动更改滚动条,并且更新视频播放位置
     currentTimie = size / maxim * duration;
     e.pageX - div.offsetLeft  ==>


     e.offsetX;


4、检查音频格式

     $("audio").canPlayType("audio/mp3");

5、
   <ul> 
    <li>
<a >小苹果</a>
   </li>
   <li>
<a >小苹果</a>
   </li>
   <li>
<a href="javascript:loadMusic(歌曲名称,歌曲路径)">小苹果</a>
   </li>
  </ul>


绘制canvas:

1、
    添加 <canvas>标签
    在js中  获取 canvas的上下文 getContext()
    绘制图形


2、
    var gra = ctx.createLineraGradient(0,150,400,150);
    gra.addColorStop(0,"red");
    gra.addColorStop(0.2,"yellow");
    gra.addColorStop(1,"blue");
3、canvas的默认原点为(0,0)
     ctx.translate(25,25)  : 原点则为 (25,25)
     ctx.fillRect(0,0,100,100);实际显示效果 从 (25,25)开始显示

     ctx.translate(25,25)  : 原点则为 (50,50)



1、文本

     1.1 属性 
           font ="font-weight font-style font-size font-family"
  font="Verdana"
  font="bold italic 24px Verdana"

2、dataTransfer

      2.1 作用
            保存拖拽过程中所涉及到的数据
   常用场合:
       源元素 ,保存数据到dataTransfer中
目标元素 ,从dataTransfer中获取数据
     2.2 如何获取dataTransfer
           在事件中通过事件参数  event.dataTransfer属性来获取
  拖拽过程中所涉及的7个事件,都能够获取dataTransfer
  常用事件:
  dragstart、drop
    2.3 如何使用dataTransfer
          setData(type,data)
 getData(type)
 clearData(type)
 type:所涉及到的文本的类型,固定值:text

3、传递数据

     源元素:拼 file:///xxxxxx.gif;e.pageX;e.pageY 字符串
             
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

h5学习笔记: ul和li组合

今天在做wing插件时候,尝试看看参考书的百度阅读的目录来做插件目录。因为wing里面导入html的样式会发生一些改变。所以制作的html页面的时候需要在里面做一下手脚。加入!important; 防...

web页面H5页面嵌入在app上的下拉刷新方法的实现绝对实用能让大家的项目美美哒

web页面嵌入到app中的下拉时刷新页面

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖...

HTML5新增元素、属性以及表单,正则表达式

HTML5新增元素及其属性,HTMl5新增表单元素,正则表达式
  • WiniceS
  • WiniceS
  • 2017年08月03日 15:09
  • 543

html5中section元素的使用方法

section元素的使用方法                                轮廓工具:https://gsnedders.html5.org/         -->   ...

HTML5中article元素的使用

本文和大家分享的主要是HTML5中article元素的相关用法,同时结合具体实例进行讲解,加深大家对article元素的印象,一起来看看吧,希望对大家学习HTML5有所帮助。 什么是Article元...

内容可编辑contenteditable

前言最近遇到一个问题:文本域的高度随输入内容的多少自适应,就像是这样的: 刚刚拿到这个问题,就想到用textarea来搞定,尝试了一下,虽然也搞定了,但总感觉有点麻烦。仔细思考一番,想到貌似h5...

H5常用的标签元素

常用HTML标签元素结合及简介 创建一个HTML文档 设置文档标题和其它在网页中不显示的信息 设置文档的标题         最大的标题 预先格式化文本           ...

关于H5中自定义属性的设置和获取

自定义数据属性是在HTML5中新加入的一个特性。简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值。自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进D...

HTML5的自定义属性的使用总结

以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性: 在标签里设置自定义属性 然后获取里面的值是使用getAttribute来获取自定义属性里面的值: var myDiv...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5新标签元素学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)