HTML5基础

1,263 阅读4分钟

使用setCustomValidity更改input表单的valueMissing

  <form>
      <input id="text" type="text" required />
      <input id="submin" type="submit" />
  </form>

如果text中没有输入内容,点击提交按钮,会提示“请填写此字段

事件顺序如下:
(1)submit按钮的click事件,若取消默认事件,则终止
(2)html5表单验证和提示,若表单验证不通过,则提示第一个不合法输入,并终止
(3)form表单的submit事件,若取消默认事件,则终止 注意: 用js触发form的submit事件,会直接进入第(3)步,不会进行html5表单验证。 所以,要想出现html5的验证提示,必须经过submit按钮。

注意
用js触发form的submit事件,会直接进入第(3)步,不会进行html5表单验证。 所以,要想出现html5的验证提示,必须经过submit按钮。

  var text = document.querySelector('#text')
  document.querySelector('#submin').addEventListener('click', () => {
    text.validity.valueMissing  ? ftext.setCustomValidity('输入不能为空')  : text.setCustomValidity('');
    //或者    
    if (text.checkValidity() === false) {
      text.setCustomValidity('输入不能为空')
    }
  }

form表单

  • autocomplete关闭智能提示
  • novalidate关闭验证
  • datalist筛选数据,有自己的id值,配合list属性使用
<input type="text" value="" name="txtList" list="url_list" />
<datalist id="url_list">
<option value="https://www.baidu.com">百度</option>
<option value="https://www.baidu.com">谷歌</option>
<option value="https://www.baidu.com">优酷</option>
<option value="https://www.baidu.com">快播</option>
</datalist>
  • form不在form表单里进行提交,跟id绑定
<form action="" method="get" id="fm">
  <input type="text" value="" name="txt" autofocus placeholder="请输入名字" required/>
  <input type="submit" value="提交" id="sm" />
</form>

<input type="text" value="" name="name" form="fm"/>

form属性在表单标签中写,值就设置于form中的id值,该input就可以提交了

参数

datalist绑定到输入域

  <input type="text" value="" name="txtList" list="url_list" />
  <datalist id="url_list">
      <option value="https://www.baidu.com">百度</option>
      <option value="https://www.baidu.com">谷歌</option>
      <option value="https://www.baidu.com">优酷</option>
      <option value="https://www.baidu.com">快播</option>
  </datalist>

datalist标签需要有自己的id值,然后配合list属性来使用,才可以有数据列表的效果

contains方法来判断元素包含关系

  var result=document.getElementById(id).classList.contains("test")
  console.log(result)

contains方法可以判断A元素是否包含B元素,返回布尔值

dataset获取自定义属性(自己添加的属性就叫自定义属性)

  <div id="dv" data-name="帅哥" data-job="前端"></div>
  var dt=document.querySelector("#dv").dataset;
  console.log(dt.name);
  // 通过代码为标签添加自定义属性
  dt.age="25";

文件读取

通过FileReader对象可以读取本地存储的文件,使用 File 对象来指定所要读取的文件或数据。用户可以通过选择文件按钮或者拖移上传文件

  <input type="file" id="file"/>
  //读取文件,获取上传文件标签的这个对象
  var f1 = document.querySelector("#file");
  //上传文件的触发事件--(只要上传文件就会触发该事件)
  f1.onchange=function () {
    console.log(this.files[0], 'this')
    //可以获取上传的文件
    var fl1=this.files[0];
    //读取文件,创建读取文件的对象
    var fReader=new FileReader();
    //读取文件
    fReader.readAsText(fl1);
    //开始读取文件的加载的事件
    fReader.onload=function () {
      //css的代码最终是可以在style标签写的
      var style=document.createElement("style");
      //获取的读取的结果
      var result=fReader.result;
      style.innerHTML=result;
      document.querySelector("head").appendChild(style);
  };
};
  • 属性
    • FileReader 接口有3个用来读取文件方法返回结果在result中
      readAsBinaryString ---将文件读取为二进制编码
      readAsText ---将文件读取为文本
      readAsDataURL ---将文件读取为DataURL
    • FileReader 提供的事件模型
      onabort 中断时触发
      onerror 出错时触发
      onload 文件读取成功完成时触发
      onloadend 读取完成触发,无论成功或失败
      onloadstart 读取开始时触发
      onprogress 读取中

网络检测

  var state = window.navigator.onLine;
  if (state) {
      alert("在线的");
  } else {
      alert("不在线"); //回去自己试试
  }
  // ononline联网触发,onoffline掉线触发
  window.ononline = function () {
      alert("连接上了");
  };
  window.onoffline = function () {
      alert("掉线了")
  };

获取当前地理位置

  • 获取当前地理信息 navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
  • 获取实时地理信息 navigator.geolocation.watchPosition(successCallback, errorCallback) 当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象。 获取地理信息失败后,会调用errorCallback,并返回一个包含错误信息的对象。
  window.navigator.geolocation.getCurrentPosition(success, error)
  // 定位成功
  function success (msg) {
    console.log(msg.coords.latitude)
    console.log(msg.coords.longitude)
  }
  • 属性
    position.coords.latitude纬度
    position.coords.longitude经度
    position.coords.accuracy精度
    position.coords.altitude海拔高度

Canvas基础

/#放在草稿箱快两个月,一直想增加内容也没得时间,发布出来作为个人激励吧。