// 模糊查询
<style> #div1{ 200px; height: 200px; border: 10px dashed greenyellow; display: none; } </style> </head> <body> <input type="text" id="inp1"> <div id="div1"></div> </body> <script> // 1.获取元素 var oInp = document.getElementById('inp1'); var oDiv = document.getElementById('div1'); // 2.响应事件 oInp.oninput = function(){ // 定义初始数据 var arr = ['abc','ade','xyz','mnab']; // 创建div中的元素 var str = '' for(var i = 0 ;i<arr.length;i++){ if(arr[i].indexOf(this.value)!=-1){ oDiv.style.display = 'block' str+='<p>'+ arr[i] +'</p>' } } oDiv.innerHTML = str; if(this.value==''||oDiv.innerHTML ==''){ oDiv.style.display = 'none' } }
拖拽
1.HTML5拖放（Drag和Drop）(1)、什么是拖放
1、拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
2、在HTML5中，拖放是标准的一部分，任何元素都能够拖放。
3、HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成
标准制定。
4、HTML5的设计目的是为了在移动设备上支持多媒体。
5、HTML5简单易学。
<div id="box" ondrop="drop(event)" ondragover ='over(event)'></div>
<img src="./images/logo.png" alt="" draggable="true" ondragstart="start(event)" id="img1">
</body>
<script>
// 1.获取元素
var oBox = document.getElementById('box');
var oImg = document.getElementById('img1');
// 2.定义方法
// 开始拖拽
function start(event){
// dataTransfer.setData 设置属性
console.log(event)
// 相当于设置一个属性a用来存储img的id值。目的：方便再放下的时候可以知道放下的是谁
event.dataTransfer.setData('a',event.target.id)
// console.log(event.target.id) //img1
// console.log(this.id)
// console.log(this)
}
// 准备放下
function drop(event){
event.preventDefault();//阻止事件的默认行为
var data = event.dataTransfer.getData('a')
console.log(event.dataTransfer.getData('a'))
document.getElementById('box').appendChild(document.getElementById(data))
}
// 已经放下
function over(event){
event.preventDefault();
}
canvas
HTML5<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成。
<canvas>标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使
用canvas绘制路径,盒、圆、字符以及添加图像。
<body>
<canvas width="600" height="400" style="border: 10px solid green;" id="myCanvas"></canvas>
</body>
<script>
// 1.获取元素
var c = document.getElementById('myCanvas');
// 2.告诉浏览器用什么方式渲染
var ctx = c.getContext('2d');
// 3.开始画图
// 分析。学会画直线，画圆
// var grad = ctx.createLinearGradient(0,25,150,50)
// grad.addColorStop('0','red');
// grad.addColorStop('0.3','green');
// grad.addColorStop('0.7','pink');
// grad.addColorStop('1','yellow');
// ctx.fillStyle = grad;
// // 画矩形 ctx.fillRect(x,y,xW,yH)
// ctx.fillRect(0,0,150,50)
// 画线
// ctx.moveTo(0,0) //起始坐标
// ctx.lineTo(150,150)//结束坐标
// ctx.stroke() //画线
// 通过画线实现矩形 位置100,100开始，矩形宽度100,100
// ctx.moveTo(100,100);
// ctx.lineTo(200,100);
// ctx.lineTo(200,200);
// ctx.lineTo(100,200);
// ctx.lineTo(100,100);
// ctx.strokeStyle = 'blue'
// ctx.fillStyle = 'green'
// ctx.fill()
// ctx.stroke();
// 画圆
// ctx.arc(x,y,r,圆的起始位置,圆的结束位置,方向); true:代表逆时针方向 ,默认是false顺时针方向
// ctx.beginPath();
// ctx.arc(200,240,100,0*Math.PI,2*Math.PI,true)
// 仅用于描边strokeStyle
// ctx.strokeStyle = 'red';
// // 这也是填充颜色fillStyle
// ctx.fillStyle = 'red';
// // 这是填充颜色
// // ctx.fill()
// ctx.stroke()
// 画文本
// ctx.font = '30px Arial'
// ctx.strokeStyle= 'red'
// ctx.fillStyle = 'red'
// ctx.fill()
// ctx.fillText('Hello',100,100)
// 渐变颜色填充
// ctx.font = '30px Arial'
// var grad = ctx.createLinearGradient(150,150,150,0)
// grad.addColorStop('0','red');
// grad.addColorStop('1','green');
// ctx.fillStyle = grad;
// // ctx.fill()
// ctx.fillText('Hello',100,100)
// 圆的径向渐变
ctx.beginPath();
ctx.arc(100,100,100,0*Math.PI,2*Math.PI,true)
// createRadialGradient(x1,y1,r1,x2,y2,r2) x1 是起始圆的横坐标 x2是结束圆的横坐标
var grad = ctx.createRadialGradient(100,100,30,100,100,80)
grad.addColorStop('0','red');
grad.addColorStop('1','green');
ctx.fillStyle = grad;
ctx.fill()
ctx.stroke()
3.HTML5的web存储
HTML5web存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储
用户的浏览数据。
早些时候,本地存储使用的是cookie。但是Web存储需要更加的安全与快速.这些
数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大
量的数据，而不影响网站的性能。数据以键/值对存在,web网页的数据只允许该网页
访问使用。
(1)、localStorage对象
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
localStorage对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据
依然可用。
不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有如
下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
// localstorage 使用 特点:会永久保存，除非手动删除 // 设置数据 // localStorage.setItem('count',5) // console.log(localStorage.getItem('count')) // localStorage.removeItem('count') // console.log(localStorage.getItem('count')) //null // localStorage.clear() //sessionStorage 使用 特点：浏览器关闭自动消失 sessionStorage.setItem('count',15) console.log(sessionStorage.getItem('count')) // sessionStorage.removeItem('count') // console.log(sessionStorage.getItem('count')) //null // sessionStorage.clear()