【Charles's Blog】

更新于 2019-11-09

H5学习笔记(一)

H5中的一些新增标签

canvas 标签，用于JS绘图
audio 标签，用于定义音频内容
video 标签，用于定义视频内容
embed 标签，定义嵌入的内容，比如插件
article 标签，定义页面的侧边栏内容
aside 标签，定义页面内容之外的内容
footer 标签，定义section或document的页脚
header 标签，定义文档的头部区域
meter 标签，定义度量衡，仅用于已知最大和最小的度量
nav 标签，定义运行中的进度（进程）
section 标签，定义文档中的节(section 、区段)
datalist标签，为表单新增标签，常与input配合使用，类似于拥有输入功能的下拉列表

output标签，用于展示内容，只能展示，不能用来编辑

<body>
    <header>文档头部</header>
    <div>
        <article>页面侧边栏内容</article>
        <aside>页面内容之外的内容</aside>
    </div>
    <footer>定义页脚</footer>
</body>

新增表单的输入类型
- email: 输入email格式
- tel: 手机号码
- url:只能输入url格式
- number：只能输入数字
- search: 搜索框
- range : 范围，可以进行拖动，进行value取值
- color : 拾色器，通过value进行取值
- time ：时间
- data : 日期
- datatime : 时间日期
- month : 月份
- week : 星期
表单新增事件
- oninput 用户输入内容时触发，可用于移动端的输入字数统计
- oninvaild 验证不通过时触发
表单新增属性
- placeholder 占位符
- autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址
- form 指定表单向属于哪个form,处理复杂表单时会需要
- autocomplete 自动完成，用于表单元素，也可用于表单自身
- novalidate 关闭验证，可用于form标签
- required 验证条件，必填项
- pattern 正则表达式，验证表单
案例：详见我的CSDN上的 H5简易登录界面那一篇博客

更新于 2019-10-17

两数之和

问题描述：给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。

代码

方法一: 执行用时：132 ms

for(let i=0 ; i<nums.length ; i++){
        k = i;
        for(let j=i+1 ; j<nums.length; j++){
            if(nums[k]+nums[j] == target){
                return [k , j]
            }
        }
  }

方法二:执行用时：56 ms

var map = new Map();//Map是一组键值对的结构
   for(var i=0; i<nums.length ; i++){
   //设置键值对:map.set(key , value)
       map.set(nums[i],i);
   }
   for(var j=0; j<nums.length; j++){
   //map.has()返回布尔值,查询key是否在当前对象中
   //map.get()获取key对应的键值,若没有则返回undefined
       if(map.has(target-nums[j])&&map.get(target-nums[j])!=j){
             return [j,map.get(target - nums[j])];
           }
    }

阅读全文

ubuntu分辨率问题

更新于 2019-10-17

ubuntu

解决安装双系统后ubuntu系统只有一个分辨率问题

问题描述：
在windows系统的基础上安装了ubuntu18.04之后，发现系统的分辨率只有800*600一个分辨率，并且不能使用xrandr修改分辨率，使用xrandr命令报xrandr failed to get size of gamma for output default错误，找了很多教程，都出现了问题，最会终于解决了。

解决方法:

首先在打开Ubuntu命令行执行如下命令：
1
sudo gedit /etc/default/grub
然后找到#GRUB_GFXMODE=800x600这行，把800x600改成你想要的分辨率，比如1920x1080，并去掉这一行前面的#，改后变为GRUB_GFXMODE=1920x1080 ，然后保存.
打开终端用命令更新grub：sudo update-grub
重启，如果分辨率修改成功就不必再进行一下步骤了。
如没有成功就有可能是驱动问题
先执行如下命令：
1
sudo gedit /etc/xorg.conf

复制以下内容放入打开文档：

Section "Monitor"
Identifier   "Monitor0"
VendorName   "Monitor Vendor"
ModelName    "Monitor Model"
HorizSync   28.0 - 70.0
VertRefresh     56.0 - 75.0
EndSection
Section "Device"
Identifier  "VMware SVGA"
Driver      "vesa"
EndSection
Section "Screen"
Identifier "Screen0"
Device     "Card0"
Monitor    "Monitor0"
SubSection "Display"
Viewport   0 0
Depth     24
Modes     "1920x1080_60.00"
EndSubSection
EndSection

执行以下命令：

1	sudo vi /etc/default/grub 或 sudo gedit /etc/default/grub

编辑打开的文件，找到GRUB_CMDLINE_LINUX_DEFAULT那一行，在后面加上(在quiet splash后打一个空格) nomodeset（保险起见，nomodeset后面加多一个空格），保存，然后在终端输入 sudo update-grub
然后下载驱动：系统设置–软件和更新–附加驱动里面使用NVIDIA的专有驱动，第一个即可(驱动名称后面的括号里是专有，tested的那个)
下载完驱动后，重启即可，此时应该修改成功了

随手而记，以防需要之时翻找

更新于 2019-09-05

《活着》

今天在微信读书上又翻了一遍《活着》，无意间看到了一位书友的评论，他的评论是引用了茨威格的一句话：那时候还年轻，不知道所有命运馈赠的礼物，早已在暗中标好了价格。

觉得这句话很有道理，感触颇深，随手而记。

更新于 2019-08-22

设置填充和描边颜色

fillStyle : 设置用于填充绘画的颜色
strokeStyle : 设置用于描边的颜色
以上两个值都可以接受颜色名,16 进制数据，rgb 值，甚至 rgba. 一般先进行设置样式然后进行绘制。

设置阴影

此部分内容由于使用性能差，故了解即可，阴影的设置常用图片实现
shadowColor ：设置或返回用于阴影的颜色。
shadowBlur ：设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离

线性渐变样式

一般不用，都是用图片代替，canvas 绘制图片效率更高
线性渐变可以用于矩形、圆形、文字等颜色样式，线性渐变是一个对象

语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0 起始坐标，x1,y1 结束坐标

//创建线性渐变的对象，
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, 'black'); //添加一个渐变颜色，第一个参数介于              0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1, 'white'); //添加一个渐变颜色
ctx.fillStyle = grd; //关键点，把渐变设置到 填充的样式

圆形渐变(径向渐变)

创建放射状/圆形渐变对象。可以填充文本、形状等
语法: context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- x0: 渐变的开始圆的 x 坐标
- y0: 渐变的开始圆的 y 坐标
- r0: 开始圆的半径
- x1: 渐变的结束圆的 x 坐标
- y1: 渐变的结束圆的 y 坐标
- r1: 结束圆的半径

绘制背景图

语法:ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素
不常用，了解即可

第一参数：设置平铺背景的图片，第二个背景平铺的方式。

image ：规定要使用的图片、画布或视频元素
repeat ：默认。该模式在水平和垂直方向重复
repeat-x ：该模式只在水平方向重复。
repeat-y ：该模式只在垂直方向重复。

no-repeat：该模式只显示一次（不重复）

var ctx = c.getContext('2d');
var img = document.getElementById('lamp');
var pat = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat; //  把背景图设置给填充的样式
ctx.fill();

缩放(重点内容)

scale() 方法缩放当前绘图，更大或更小
语法：context.scale(scalewidth,scaleheight)
- scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
- scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

位移画布(重点)

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
- x：添加到水平坐标（x）上的值
- y：添加到垂直坐标（y）上的值
发生位移后，相当于把画布的 0,0 坐标更换到新的 x,y 的位置，所有绘制的新元素都被影响,已绘制的旧元素不会改变
位移画布一般配合缩放和旋转等

画布旋转

context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度（PI）

绘制环境的保存和还原

ctx.save() 保存当前环境的状态，可以把当前绘制环境进行保存到缓存中。
ctx.restore() 返回之前保存过的路径状态和属性，获取最近缓存的 ctx
一般配合位移画布使用

绘制环境的透明度

语法 : context.globalAlpha=number
number:透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间
设置透明度是全局的透明度的样式。注意是全局的。

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除

更新于 2019-08-19

创建矩形

rect(x , y , width , height)
- x , y 是矩形左上角的坐标位置
- width和height是矩形的宽和高，单位为像素。
- 该方法只规划了所绘制矩形的路径，并没有填充和描边
strokeRect(x , y , width , height)
- 参数含义与rect( )方法相同
- 该方法在在规划完矩形路径后会立即进行描边，不必再写stroke( )方法
fillRect(x , y , width , height)
- 参数含义与rect( )方法相同
- 方法执行完成后。立即对当前矩形进行fill填充
clearRect(x , y , width , height):清除某个矩形内的绘制内容，相当于橡皮擦

绘制圆形

arc(x , y , r , sAngle , eAngle , counterclockwise)
- x , y 指的是圆心坐标
- r指的是半径
- sAngle:绘制开始的角度，注意是弧度，圆心到最右边点是 0 度，顺时针方向弧度增大
- eAngel:结束的角度，注意是弧度
- counterclockwise：是否是逆时针。true 是逆时针，false：顺时针
弧度和角度的转换公式： rad = deg * Math.PI / 180;
圆上面点的坐标计算公式：
- Math.sin(弧度)
- Math.cos(弧度)
- x = x0 + Math.cos(rad) * R
  - x0: 圆心的x轴方向上的坐标
  - R：指的是圆心到要计算的点的直线距离
  - rad：该值为弧度值，指的是所计算的点与圆心的连线和x轴正方向的夹角的弧度值。
- y = y0 + Math.sin(rad) * R
  - y0: 圆心在y轴上的坐标，其余的同上

绘制上下文的文字属性

font 设置或返回文本内容的当前字体属性,例如:ctx.font = “18px ‘微软雅黑’”;
textAlign 设置或返回文本内容的当前对齐方式,有以下属性值：
- start : 默认。文本在指定的位置开始。
- end : 文本在指定的位置结束。
- center: 文本的中心被放置在指定的位置
- left : 文本左对齐。
- right : 文本右对齐。
textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic ：默认。文本基线是普通的字母基线
- top ：文本基线是 em 方框的顶端
- hanging ：文本基线是悬挂基线
- middle ：文本基线是 em 方框的正中。
- ideographic：文本基线是 em 基线。
- bottom ：文本基线是 em 方框的底端
fillText( )：在画布上绘制被填充的文本
strokeText( )：在画布上绘制文本(无填充)
measureText( )：返回包含指定文本宽度的对象

绘制图片

drawImage(img , x , y)：基本图片绘制
- x , y 绘制图片左上角的坐标， img是绘制图片的dom对象
drawImage(img , x , y , width , height)：
- 该方法用于在画布上绘制图片，并指定宽高
- 如果指定宽高，最好成比例，不然图片会被拉伸
- 设置高 = 原高度 * 设置宽/ 原宽度
drawImage(img, sx , sy , swidth , sheight , x , y , width , height)
- 该方法用于图片裁剪
- sx , sy 裁剪的左上角坐标，
- swidth：裁剪图片的高度。 sheight:裁剪的高度

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除

更新于 2019-08-16

由于图片上传有些问题，如要查看图片效果，请前往CSDN，链接：https://blog.csdn.net/qq_44363897/article/details/99683881

canvas简介

canvas是 HTML5 提供的一种新标签.
语法:
1
<canvas> </canvas>
canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画,控制其每一个像素.
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas主要应用领域

游戏开发
可视化数据：数据图表化
banner广告
图形编辑器：Photoshop 图形编辑器将能够 100%基于 Web 实现。
网页特效.

canvas初步使用

可以为canvas设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略
width 和 hegiht：默认 300*150 像素
不要用 CSS 控制它的宽和高,会走出图片拉伸，一般直接设置为内联样式或者利用js设置。
重新设置 canvas 标签的宽高属性会让画布擦除所有的内容
可以给 canvas 画布设置背景色.

canvas的兼容性

ie9 以上才支持 canvas, 其他 chrome、ff、苹果浏览器等都支持
只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外)
移动端的兼容情况非常理想，基本上随便使用
2d 的支持的都非常好，3d（webgl）ie11 才支持，其他都支持

如果浏览器不兼容，最好进行友好提示,如下：

1
2
3

<canvas id="can">
  你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
</canvas>

canvas绘制上下文

canvas 的绘图是使用 JavaScript 操作的。
Context 对象就是 JavaScript 操作 Canvas 的接口
使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文,使用[CanvasElement].getContext(‘webgl’)来获取 3D 绘图上下文
1
2
var canvas = document.getElementById('can'); //获得画布
var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl
canvas坐标系
canvas坐标系，从左上角（0,0）开始，x向右增大，y向下增大。

设置绘制起点

使用moveTo(x , y)方法来设置起点，即画笔的初始位置
x , y都是相对于canvas盒子的左上角的

语法：

1 2	var ctx = canvas.getContext('2d'); ctx.moveTo(x,y);

绘制直线

使用lineTo(x,y)方法来绘制直线
x , y 表示直线的起点，即指从x,y的位置绘制一条直线到起点或者上一个线头点。

语法：

1 2	var ctx = canvas.getContext('2d'); ctx.lineTo(x,y);

路径的开始与闭合

开始路径：ctx.beginPath( )方法
- 如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开
- beginPath: 核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理
闭合路径：ctx.closePath( )方法：闭合路径会自动把最后的线头和开始的线头连在一起。

描边

语法：ctx.stroke( )
次方法可以使绘制的图像真正显示在浏览器窗口，路径只是草稿，真正绘制线必须执行stroke

canvas 绘制的基本步骤

第一步：利用DOM获得canvas标签,获得后可以设置其宽高
第二步：获得上下文：canvasElem.getContext(‘2d’);
第三步：开始路径规划 :ctx.beginPath( )
第四步：设置起始点：ctx.moveTo(x, y)
第五步：绘制线条：ctx.lineTo(x, y)，之后可以设置描边的样式，如颜色等(详见案例)。
第六步：闭合路径(ctx.closePath( ))及描边或者描边(ctx.stroke( ))

填充

语法：ctx.fill( )
将闭合的路径的内容填充具体的颜色。默认黑色

案例

案例1：红色的闭合三角形

<canvas id="demo" width="600px" height="600px">
        你的浏览器不支持canvas,请升级
</canvas>
<script>
    //拿到canvas标签
    var canvas = document.getElementById("demo");
   //拿到canvas的上下文
   var tex = canvas.getContext("2d");
   //绘制
   tex.moveTo(100,100);//把画笔移动到100,100处
   tex.lineTo(200,100);//从画笔的位置画一条直线到200,100处
   tex.lineTo(100,200);//在200,100处画一条线到100,200处
   //tex.lineTo(100,100);
   tex.closePath();//闭合路径，与tex.lineTo(100,100)作用相同
   //设置线宽
   tex.lineWidth = 4;
   //展现路线
   tex.strokeStyle = "blue";//设置描边样式
   tex.stroke();//描边
   //填充
   tex.fillStyle = "red";//设置填充颜色
   tex.fill();
</script>

案例2：折线图

<canvas id="ideo"> 
     你的浏览器不支持canvas,请升级浏览器
</canvas>

<script>
 	var canvas = document.getElementById("ideo");
    var tex = canvas.getContext("2d");
    //设置画布的宽高以及边框样式
    canvas.width = 1000;
    canvas.height = 500;
    canvas.style.border = "1px solid blue";
    tex.moveTo(100,400); //起始点即原点
    tex.lineTo(800,400); //x轴
    tex.lineTo(790,410); //x轴下半部分的箭头
    tex.moveTo(800,400); //设置画笔到该点
    tex.lineTo(790,390); //x轴上半部分箭头
    tex.strokeStyle = "red"; //设置x轴的颜色为红色
    tex.stroke();//描边
    tex.beginPath();//开启一个新状态
    tex.moveTo(100,400); //起始点即原点
    tex.lineTo(100,50); //y轴
    tex.lineTo(110,60); //y轴右半部分箭头
    tex.moveTo(100,50); //设置画笔到该点
    tex.lineTo(90,60); //设置y轴左半部分箭头
    tex.strokeStyle = "red"; //设置y轴的颜色为红色
    tex.stroke(); //描边
    tex.beginPath(); //开启一个新状态
    tex.moveTo(100,400); //画笔回到起始原点
    //以下为点的坐标,可以任意设置
    tex.lineTo(150,250);
    tex.lineTo(250,150);
    tex.lineTo(600,150);
    tex.lineTo(750,80);
    //描边样式
     tex.strokeStyle = "green";
     tex.stroke();
</script>

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除。

更新于 2019-08-15

form标签的常用属性有以下几个:

action属性
- 取值为URL
- 规定当提交表单时向何处发送表单数据
name属性
- 规定了表单的名称
method属性:控制表单提交方式
- 有如下属性值：
  - get：默认的提交方式
  - post：
- get方法和post方法相同之处：功能相同，都是将表单中的元素交给服务器进行处理
- get方法和post方法不同之处：
  - 对于get方式的提交，表单元素对于的值会以？key = value & key = value的方式显示在地址栏里面(即请求参数会在地址栏中显示)，但post不会，post会封装在请求体中，故post相对来说安全，常用post进行提交数据。
  - 由于get方法要把数据显示在地址栏中，故其传递的数据量是有限制的(提交数据量要小于1024字节)，post没有限制。
target:规定在何处打开 action URL
- 有如下属性值：
  - _blank:在新窗口中打开
  - _self:默认值，在相同框架或原页面中打开。
  - _parent:在父框架集中打开（父窗口）
  - _top:在主框架中或主窗口打开
  - framename:在指定框架中打开
enctype:指定表单数据的编码方式，表单中的那些数据可以提交给服务器
- 取值如下：
  - application/x-www-form-urlwncoded:默认值，允许将普通字符和特殊字符提交给服务器，文件不行
  - multipart/form-data:允许提交文件，会影响上传数据，但是当input属性的type值为file时必须使用
  - text/plain:只允许进行普通字符的提交，特殊字符无法提交。如：？，=，&等
autocomplete：规定是否启用表单自动完成功能，其值为on或off
accept-charset:规定服务器可处理的表单数据字符集
novalidate：如果使用该属性，则提交表单时不进行验证

更新于 2019-08-14

预备知识：CSS3中的3D变换相关知识

3D移动
- translate3d(x,y,z)或者分开设置：translateX(Xlength),translateY(Ylength),translateZ(Zlength)
3D缩放
- scale3d(x,y,z)或者分开设置：scaleX(x),scaleY(y),scaleZ(z)
3D旋转
- rotate3d(x,y,z,angle)：自定义需要旋转的坐标轴
- rotateX(x):绕X轴旋转
- rotateY(y)：绕Y轴旋转
- rotateZ(z):绕Z轴旋转
透视/景深效果
- perspective(length) 为一个元素设置三维透视的距离,仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。
- perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
- transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中),其属性值如下：
  - flat:子元素将不保留其3D位置—-平面方式
  - preserve-3d:子元素将保留其3d位置—-立体方式

制作轮播图所需知识：

CSS基本知识
JS中的DOM操作的相关知识
定时器的相关知识

相关代码如下：

CSS代码：

/*取消浏览器默认样式*/
*{
    margin: 0;
    padding: 0;
}
body{
    background-color:#fff;;
}
/*设置container样式*/
#container{
    /*设置宽和高，根据自己的图片的宽高所设置*/
    width: 520px;
    height: 333px;
    /*居中*/
    margin: 80px auto;
    background-color:greenyellow;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
#pic{
    /*去除项目符号*/
    list-style: none;
    /*设置ul宽度，使图片有足够的控件使之横着放置*/
    /*开启绝对定位*/
    position: absolute;
}
#pic li{
    float: left;
    /*设置外边距*/
    margin: 0 10px;
}
#navDiv{
    position: absolute;
    bottom: 15px;
}
#navDiv a{
    float: left;
    width: 20px;
    height: 20px;
    background-color:red;
    margin: 0 6px;
    opacity: 0.7;
    /*兼容IE8透明*/
    filter: alpha(opacity=70);
}
/*设置鼠标移入的效果*/
#navDiv a:hover{
    background-color:black;
}

JS和HTML相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮转图</title>
    <link rel="stylesheet" href="css/轮播图.css">
    <script src="js/tools.js"></script>
    <script>
        window.onload = function(){
            var pic = document.getElementById("pic");
            /*获取页面中所有的图片*/
            var imgArr = document.getElementsByTagName("img");
            /*设置pic的宽度,使之能够自动根据图片的多少调整宽度*/
            pic.style.width = 520 * imgArr.length + "px";
            //设置导航按钮居中
            var navDiv = document.getElementById("navDiv");
            var container = document.getElementById("container");
            //设置navDiv的left值
            navDiv.style.left = (container.offsetWidth - navDiv.offsetWidth) / 2 + "px";
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //设置默认图片为第一张
            var index = 0;
            allA[index].style.backgroundColor = "black";

            for(var i=0 ;i<allA.length; i++){
                allA[i].num = i;//记录这是第几张图片
                //给每张图片添加单击响应函数
                allA[i].onclick = function(){
                    //关闭定时器
                    clearInterval(timer);
                    index = this.num;
                    // pic.style.left = -520*index + "px";
                    setA();
                    /*使用move函数*/
                    move( pic ,"left", -520*index , 20 , function(){
                        //动画执行完毕，开启自动切换
                        exchange();
                    });
                }
            }
            //自动切换图片
            exchange();
            var timer;
            //创建一个函数，看是否启动自动切换图片
            function exchange(){
                //开启一个定时器，用于自动切换图片
                timer = setInterval(function(){
                    index++;
                    index %= imgArr.length; 
                    //执行动画，切换图片
                    move( pic ,"left", -520*index , 20 , function(){
                        //设置导航按钮
                        setA();
                    });
                },3000);
            }

            //创建一个方法，用来选中a
            function setA(){
                //判断当前索引是否是最后一张
                if(index >= imgArr.length-1){
                    index = 0;
                    pic.style.left = 0;
                }
                for(var i=0; i<allA.length; i++){
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "black";
            }
        };
    </script>
</head>
<body>
    <!--创建一个容器-->
    <div id="container">
        <!--创建一个ul用于放置图片-->
        <ul id="pic">
            <li><img src="img/picture/1.jpg" alt=""></li>
            <li><img src="img/picture/2.jpg" alt=""></li>
            <li><img src="img/picture/3.jpg" alt=""></li>
            <li><img src="img/picture/4.jpg" alt=""></li>
            <li><img src="img/picture/5.jpg" alt=""></li>
            <li><img src="img/picture/1.jpg" alt=""></li>
        </ul>
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>

JS包中的代码：

//尝试创建一个可以执行简单动画的函数
/*
 * 参数：
 * 	obj:要执行动画的对象
 * 	attr:要执行动画的样式，比如：left top width height
 * 	target:执行动画的目标位置
 * 	speed:移动的速度(正数向右移动，负数向左移动)
 *  callback:回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0 向 800移动，则speed为正
	//如果从800向0移动，则speed为负
	if(current > target) {
		//此时速度应为负值
		speed = -speed;
	}

	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
	obj.timer = setInterval(function() {

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//从800 向 0移动
		//向左移动时，需要判断newValue是否小于target
		//向右移动时，需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
			newValue = target;
		}

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时，使其停止执行动画
		if(newValue == target) {
			//达到目标，关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数
			callback && callback();
		}

	}, 30);
}

/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 * 		obj 要获取样式的元素
 * 		name 要获取的样式名
 */
function getStyle(obj, name) {

	if(window.getComputedStyle) {
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	} else {
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}

}

最终动图效果

本文代码来自于李立超老师前端课程，本人在学习时所记，如有侵权，请联系我删除

阅读全文

H5学习笔记(一)

两数之和

解决安装双系统后ubuntu系统只有一个分辨率问题

《活着》

设置填充和描边颜色

设置阴影

线性渐变样式

圆形渐变(径向渐变)

绘制背景图

缩放(重点内容)

位移画布(重点)

画布旋转

绘制环境的保存和还原

绘制环境的透明度

创建矩形

绘制圆形

绘制上下文的文字属性

绘制图片

canvas简介

canvas主要应用领域

canvas初步使用

canvas的兼容性

canvas绘制上下文

canvas坐标系

设置绘制起点

绘制直线

路径的开始与闭合

描边

canvas 绘制的基本步骤

填充

案例

form标签的常用属性有以下几个:

预备知识：CSS3中的3D变换相关知识

相关代码：

制作轮播图所需知识：

相关代码如下：

最终动图效果

本文代码来自于李立超老师前端课程，本人在学习时所记，如有侵权，请联系我删除