---------------------加油加油武汉加油中国加油！------------------------------------------------------------------------------------2020-02-04----------------------------------------
一.属性篇
1.placeholder
<input type = "text" placeholder = "手机/邮箱/用户名">
2.input新增的type
<!--Calender类-->
<input type = "date"><!--chrome支持，Safari，IE不支持 -->
<input type = "time">
<input type = "datetime-local">
<input type = "week">
<input type = "number"><!--只允许填数字，以上以下兼容性都不好-->
<input type = "email">
<input type = "color">
<input type = "range" min="1" max = "100" name = "range"><!--进度条-->
<input type = "search"><!--会自动提示以前填过的信息-->
<input type = "url">
3.contenteditable
//使字母wangjunkai可在屏幕中直接修改，可以继承给子元素，不要嵌套，没有兼容性问题
<div contenteditable = "true">wangjunkai</div>
4.Drag被拖拽元素
<div class = "k" draggable = "true"></div><!--chrome,safari可用-->
<!--<a>标签,<img src = " ">标签,默认携带拖拽功能。-->
<!--拖拽的生命周期
1.拖拽开始，拖拽进行中，拖拽结束。
2.被拖拽的物体，目标区域
-->
<!--按下物体的瞬间是不会触发事件的-->
<script>
//拖拽开始
var oDragDiv = document.getElementByClassName("a")[0];
oDragDiv.ondragstart = function(e){
console.log(e);
}
//拖拽中
oDragDiv.ongrag = function(e){
console.log(e);
}
//拖拽结束
oDragDiv.ondragend = function(e){
console.log(e);
}
</script>
//一个拖拽事件，拖拽移动正方形
<style>
.a{
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
</style>
<body>
<div class="a" draggable="true"></div>
</body>
<script>
var oDragDiv = document.getElementsByClassName("a")[0];
var beginX = 0;
var beginY = 0;
oDragDiv.ondragstart = function(e){
beginX = e.clientX;
beginY = e.clientY;
}
oDragDiv.ondragend = function(e){
var x = e.clientX-beginX;
var y = e.clientY-beginY;
oDragDiv.style.left = oDragDiv.offsetLeft+x+"px";
oDragDiv.style.right = oDragDiv.offsetRight+y+"px";
}
</script>
//拖拽到目标，目标元素的事件
<style>
.a{
width: 200px;
height: 200px;
position: absolute;
background-color: aqua;
}
.target{
position: absolute;
width: 300px;
height: 300px;
border: 1px solid;
left: 600px;
}
</style>
<body>
<div class="a" draggable="true"></div>
<div class="target"></div>
</body>
// 所有的标签元素当周期事件结束时，默认事件回到原处。
// 事件是由行为触发的，但是一个行为不止触发一个事件。
<script>
var oDragDiv = document.getElementsByClassName("a")[0];
oDragDiv.ondragstart = function(e){
}
oDragDiv.ondragend = function(e){
}
var oDragTarget = document.getElementsByClassName("target")[0];
oDragTarget.ondragenter = function(e){//不是元素图形进入就触发，是拖拽的鼠标进入才触发。
}
oDragTarget.ondragover = function(e){//在目标区域移动触发
e.preventDefault();
}
oDragTarget.ondragleave = function(e){//离开目标区域触发
}
oDragTarget.ondrop = function(e){//在ondragover中触发default，才能触发drop事件。
}
</script>
//拖拽事件
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 150px;
height: auto;
position: absolute;
border: 1px solid;
padding-bottom: 10px;
}
.target{
position: absolute;
width: 150px;
height: autopx;
border: 1px solid;
left: 300px;
padding-bottom: 10px;
}
li{
position: relative;
width: 100px;
height: 30px;
background-color: #abcdef;
margin: 10px auto 0px auto;
list-style: none;
}
</style>
<body>
<div class="a" draggable="true">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="target"></div>
</body>
<script>
var dragDom;
var liList = document.getElementsByTagName("li");
for(var i = 0;i<liList.length;i++){
liList[i].setAttribute("draggable",true);
liList[i].ondragstart = function(e){
dragDom = e.target;
}
}
var box2 = document.getElementsByClassName("target")[0];
box2.ondragover = function(e){
e.preventDefault();
}
box2.ondrop = function(e){
box2.appendChild(dragDom);
dragDom = null;
}
</script>
5.DataTransfer
oDragDiv.ondragstart = function(e){
//拖动后改变鼠标样式，不常用，兼容性极差。
e.dataTransfer.effectAllowed = "link|copy|move";
}
//还有一个dropeffect 在ondrop函数中；
二，标签篇
1.语义化标签
<header></header>
<footer></footer>
<nav></nav>
<article></article>
<section></section>//段落
<name></name>
<aside></aside>//侧边栏
2.canvas画线
<style>
canvas{
width: 500px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="can" width="700px" height="500px"></canvas><!--设置画布大小-->
</body>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
// 起点
ctx.moveTo(100,100);
// 线的粗细
ctx.lineWidth = 10;
//画
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(128,298);
// 闭合(针对一个笔画来说)
ctx.closePath();
// 填充
ctx.fill();
ctx.stroke();
// 重新开启路径
ctx.beginPath();
ctx.lineWidth=5;
ctx.moveTo(300,100);
ctx.lineTo(300,200);
ctx.stroke();
</script>
//用canvas画矩形
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
//（起始位x，起始位y，长x，宽y）;
// 分步画
ctx.rect(100,100,200,100);
ctx.stroke();
//直接画一个矩形
ctx.strokeRect(100,100,200,100);
//直接画出来一个填充的矩形
ctx.fillRect(100,100,200,100);
</script>
//画一个会移动的矩形
<body>
<canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var height = 100;
//直接画一个矩形
var timer = setInterval(function(){
//相当于清屏
ctx.clearRect(0,0,500,300);
ctx.strokeRect(100,height,50,50);
height += 5;
},1000/60);
</script>
//画圆
<body>
<canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<!-- 圆心（x,y），半径(r)，弧度(起始弧度，结束弧度)，方向（顺时针0|逆时针1） -->
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.arc(100,100,50,0,Math.PI / 2,1);
ctx.stroke();
</script>
//画圆角矩形
<body>
<canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<!-- B(x,y),c(x,y),圆角大小 -->
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,110);
ctx.arcTo(100,200,200,200,10);
ctx.arcTo(200,200,200,100,10);
ctx.arcTo(200,100,100,100,10);
ctx.arcTo(100,100,100,200,10);
ctx.fill();
ctx.stroke();
</script>
//贝塞尔曲线
// 二次贝塞尔曲线
ctx.quadraticCurveTo(200,200,300,100);
// 三次贝塞尔曲线
ctx.bezierCurveTo(200,200,300,100,400,200);
//canvas坐标平移旋转与缩放
<!--旋转-->
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
// 旋转的时候是根据坐标系原点旋转的，以下是改变坐标系原点的位置
ctx.translate(100,100)
// 旋转
ctx.rotate(Math.PI / 6);
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();
<!--缩放-->
ctx.beginPath();
ctx.scale(2,1);//（X,Y）
ctx.strokeRect(100,100,100,100);
②canvas的save和restore
ctx.save();//保存坐标系的平移数据，缩放数据，旋转数据；
ctx.beginPath();
ctx.translate(100,100);
ctx.rotate(Math.PI / 4);
ctx.strokeRect(0,0,100,50);
ctx.beginPath();
ctx.restore();//重置画板，新图和旧图互不干扰
ctx.translate(100,100);
ctx,fillRect(200,0,100,50);
③canvas背景填充
//填充颜色
ctx.fillStyle = "blue";
//填充图片，从画板原点开始
var img = new Image();
img.src = "./good.png";
img.onload = function(){
ctx.beginPath();
//修改画板原点
ctx.translate(100,100);
var bg = ctx.creatPattern(img,"no-repeat");
ctx.fillStyle = bg;
ctx.fillRect(0,0,200,100);
}
④canvas线性渐变
var bg = ctx.createLinearGradient(0,0,200,200);
//渐变颜色
bg.addColorStop(0,"white");
bg.addColorStop(1,"black");
ctx.fillStyle = bg;
//修改坐标原点
ctx.translate(100,100);
ctx.fillRect(0,0,200,200);
⑤canvas辐射渐变
var bg = ctx.createRadialGradient(100,100,30,100,100,100);
bg.addColorStop(0,"white");
bg.addColorStop(0.5,"black");
ctx.fillStyle = bg
ctx.fillRect(0,0,200,200);
⑥canvas的阴影
ctx.shadowColor = "blue";
ctx.shadowBlur = 30;
ctx.shadowOffsetX = 15;//X方向平移了15
ctx.strokeRect(0,0,200,200);
⑦canvas渲染文字
ctx.font = "30px Georgia";
//文字描边（“文字”，x坐标，y坐标）
ctx.strokeText("wjk",200,300);
//文字填充
ctx.fillText("wjk",200,350);
⑧canvas线端样式
//线两端变圆|加方形帽子
ctx.lineCap = "round|square";
//交汇线的定点变圆滑|去掉尖|去尖锐
ctx.lineJoin = "round|bevel|miter";
⑨canvas图形叠加
context.globalCompositeOperation = 'lighter';//可以加很多值实现叠加各种效果，不一一说了；
3.svg画线与矩形
SVG:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，标签和css去画；Canvas：适合小面积的绘图，适合动画
<style>
.line1{
stroke: black;
stroke-width:3px;
}
.line2{
stroke: red;
stroke-width: 5px;
}
</style>
</head>
<body>
<svg width = "500px" height = "300px" style="border: 1px solid">
<line x1 = "100" y1 = "100" x2 = "200" y2 = "100" class="line1"></line>
<line x1 = "200" y1 = "100" x2 = "200" y2 = "200" class="line1"></line>
<!-- rx|ry:圆角 -->
<!-- 画矩形 -->
<rect height = "50" width = "100" x = "0" y = "0" rx = "10" ry = "10"></rect>
</svg>
</body>
②svg画圆和椭圆，折线
<style>
circle{
fill:transparent;
stroke:red;
}
polyline{
fill:transparent;
stroke:blueviolet;
stroke-width:3px;
}
</style>
//画圆（半径，x，y）
<circle r = "50" cx = "50" cy = "220"></circle>
//画椭圆
<ellipse rx = "100" ry = "30" cx = "400" cy = "200"></ellipse>
//画折线
<polyline points = "0 0,50 50,100 100"></polyline>
③svg画多边形和文本
//多边形
<polyline points = "0 0,5 5,"></polyline>//不会首尾相连
<polygon points = '0 0,8 8'></polygon>//首尾相连
//文本
<text x = "300" y = "50">wjk<text>
④svg透明度与线条样式
polyline{
<!-- 线条透明度-->
stroke-opacity:0.5;
<!--填充透明度-->
fill-opacity:0.3;
stroke-linecap:square|round;
//两线相交
stroke-linejoin:round|miter;
}
⑤svg的path标签
path{
stroke:red;
}
//M:移动到..开始画 L：画到..(绝对位置) l（相对位置）:
<path d = "M 100 100 L 100 100 l 100 100"></path>
//M：起点 H:水平方向 Z：闭合区间 V：纵向移动
<path d = "M 100 100 H 100 V 100"></path>
⑥svg的path画弧
//椭圆
<path d = "M 100 100 A 100（x轴半径） 50（y轴半径） 0（旋转角度） 1 1（顺时针，逆时针） "></path>
⑦svg的path线性渐变
<defs>//先定义
<linearGradient id = "bg1" x1 = "0" y1 = "0" x2 = "0" y2 = "100%">
<stop offset = "0%" style = "stop-color: rgb(255,255,0)"></step>
<stop offset = "0%" style = "stop-color: rgb(255,0,0)"></step>
</linearGradient>
</defs>
⑦svg的高斯模糊
<defs>
<filter>
<feGaussianBlur in sourceGraphic stdDeviation = "20"></feGaussianBlur>
</filter>
<rect x = "100" y = "100" height = "100" width = "200" style = "filter:url(#Gaussian)">
<defs>
⑧svg的虚线及简单动画
.line1{
stroke:black;
stroke-width:10px;
//虚线
stroke-dasharray:200px;
//偏移（左偏）
stroke-dashoffset:200px；
animation:move 2s linear infinite alternate-reverse;
@keyframes move{
0%{
stroke-dashoffset:200px;
100%{
stroke-dashoffset:0px;
}
}
}
}
⑦svg的viewbox(比例尺)
//放大一倍
<svg width = "500px" height = "300px" viewBox = "0(x),0(y),250,150" style = "border:1 px solid">
4.audio与video播放器
<audio src = "xxx.mov"></audio>
<video src = "xxx.mov"></video>
视频播放器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
video{
position: absolute;
height: 300px;
width: 600px;
left: 0;
top: 0;
}
.videoPlayer{
position: relative;
height: 300px;
width: 600px;
margin: 0px auto;
/* left: 0; */
/* top: 0; */
}
.menu{
position: absolute;
width: 100%;
height: 50px;
background: #ababab;
bottom: 0px;
background-color: rgba(0,0,0,0.5);
display: none;
}
.play{
position: absolute;
width: 60px;
height: 30px;
border: 1px solid white;
border-radius: 10px;
margin-left: 30px;
top: 50%;
line-height: 30px;
margin-top: -15px;
text-align: center;
/* align-items: center; */
cursor: pointer;
color: white;
}
.time{
position: absolute;
width: 60px;
height: 30px;
/* border: 1px solid white; */
margin-left: 100px;
top: 50%;
margin-top: -15px;
line-height: 30px;
color: white;
}
.progress{
position: absolute;
width: 100%;
height: 20px;
/* background: white; */
left: 0px;
top: -2px;
/* background: gray; */
}
.progress div{
position: absolute;
width: 120px;
height: 2px;
background: orange;
left: 0px;
top: 0px;
}
.progress i{
position: absolute;
height: 6px;
width: 6px;
border-radius: 6px;
background: white;
left: 120px;
top: -2px;
}
</style>
<body>
<!-- src为音频地址，controls必须有 ,他俩所有的属性方法都一样-->
<!-- <audio src="./2503170215.mp4" controls></audio> -->
<div class="videoPlayer">
<video src="./2503170215.mp4"></video>
<!-- 不用controls自己做一个 -->
<div class="menu">
<div class="play">播放</div>
<div class="time">12:00/13:00</div>
<div class="progress">
<div></div>
<i></i>
</div>
</div>
</div>
</body>
<script>
var videoPlayer = document.getElementsByClassName('videoPlayer')[0];
var video = videoPlayer.getElementsByTagName('video')[0]
var menu = document.getElementsByClassName('menu')[0]
var play = document.getElementsByClassName('play')[0]
var time = document.getElementsByClassName('time')[0]
var progressbar = document.getElementsByClassName("progress")[0];
videoPlayer.onmouseenter = function(){
menu.style.display = "block"
}
videoPlayer.onmouseleave = function(){
menu.style.display = "none"
}
// 播放于暂停
play.onclick = function(){
if(video.paused){
video.play();
play.innerHTML = "暂停"
}else{
video.pause();
play.innerHTML = '播放'
}
}
// 时间
setInterval(function(){
var total = video.duration;
var nowTime = video.currentTime;
time.innerHTML = parseInt(nowTime / 60) + ":" +parseInt(nowTime % 60)+parseInt(total / 60) + "/" + parseInt(total % 60);
var width = nowTime /total * progressbar.clientWidth;
progressbar.getElementsByTagName("div")[0].style.width = width+"2px";
progressbar.getElementsByTagName("i")[0].style.height = width+'6px';
},1000)
// 进度条
progressbar.onmouseenter = function(){
progressbar.style.height = "16px";
progressbar.style.top = "-14px"
progressbar.getElementsByTagName("div")[0].style.height = "16px";
progressbar.getElementsByTagName("i")[0].style.height = '20px';
}
progressbar.onmouseleave = function(){
progressbar.style.height = "2px";
progressbar.style.top = "-2px"
progressbar.getElementsByTagName("div")[0].style.height = "2px";
progressbar.getElementsByTagName("i")[0].style.height = '6px';
}
progressbar.onclick = function(e){
var location = e.layerX;
var width = progressbar.clientWidth;
var targetTime = location / width * video.duration;
video.currentTime = targetTime;
}
</script>
</html>
5.高斯模糊
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = '';
img.onload = function(){
// 1.在canvas里画图片
// (图片，开始画的位置x，y，图片的尺寸x，y，截取的坐标x，y，截取的大小x，y)
context.drawImage(img,200,200,100,100,0,0,400,400);
// 2.导出图片
var imgSrc = canvas.toDataURL();
var newImg = document.querySelector('img');
newImg.src = imgSrc;
// 3.操作像素
// 获取像素信息
var pxInfo = context.getImageData(0,0,500,500);
// 把获取到的像素信息放入canvas中
context.putImageData(pxInfo,50,50);
}
</script>
</body>
---------------待续---------------------------------------------
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
