属性

placeholder 提示信息

<input type="text" placeholder="密码">

input新增type *

Calendar 时间类

在form表单中才能发挥作用

1. 选择年月日

<input type="date">

<!--chrome支持  Safari不支持 IE部分版本不支持 -->

1. 选择时间

<input type="time">

1. 选择年月日和时间

<input type="datetime-local">

1. 选择周数

<input type="week">

contenteditable内容可编辑

加上后内容可以编辑了

<div contenteditable="true">adf</div>

draggable拖拽

1. 不是直接拖拽元素 是拖拽后有一个阴影
   
2. 拖拽的生命周期

• • 拖拽开始 拖拽进行 拖拽结束
    

1. 所有标签元素，当拖拽周期结束时，默认事件是回到原处
   

<div class="tuo" draggable="true"></div>

<!--IE谷歌 safari兼容 火狐部分不兼容-->

可以配合拖拽事件使用

//拖拽时按下的事件

odiv.ondragstart = function (e) {

   console.log(e)

}

//拖拽移动的事件

odiv.ondrag = function (e) {

   console.log(e)

}

//拖拽结束的事件

odiv.ondragend = function (e) {

   console.log(e)

}

drag目标元素--拖拽进入

1. 进入事件 拖拽元素的鼠标进入odiv中触发

odiv.ondragstart = function (e) {}

1. 拖拽元素进入到odiv中 不停触发事件

odiv.ondragover = function (e) {

   //阻止默认事件

   e.preventDefault()

}

canvas画板

创建画板

画布的大小是行间属性 width height ，不是css样式中的大小

<canvas id="can" width="500px" height="300px"></canvas>

基础方法

使用画布需要在js中

//获取元素

var canvas = document.getElementById("can");

• var ctx = canvas.getContext("2d"); getContext内容区域 相当于画笔
  
• ctx.moveTo(100,100); 画笔的起点 路径
  
• ctx.lineTo(200,100)画笔的线 从上一个点到这个点 路径
  
• ctx.stroke();把规划的路径渲染道浏览器中
  
• ctx.closePath()闭合 线回到起点

• • 只针对一个路径 新的路径不行
    

• ctx.fill() 填充
  
• ctx.lineWidth=10; 设置线条的粗细

• • 把同一个路径的都会设置成一样的粗细
    

• ctx.beginPath() 重新开始一个路径