Make   home   at yourself!
Make home at yourself!


  • Home

  • Archives

  • Tags

Drop

Posted on 2016-09-23

拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>拖拽</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: radial-gradient(#fff, yellow);
position: absolute;
cursor: move;
border-radius: 100px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
#div2{
left: 300px;
width: 200px;
height: 200px;
background: radial-gradient(#fff, blue);
position: absolute;
cursor: move;
border-radius: 100px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
#div3{
left: 300px;
top:300px;
width: 200px;
height: 200px;
background:green;
position: absolute;
cursor: move;
border-radius: 100px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
}
#div4{
left: 500px;
top:300px;
width: 200px;
height: 200px;
background:green;
position: absolute;
cursor: move;
border-radius: 100px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>

<script type="text/javascript">
window.onload = function() {
// var oDiv = document.getElementById('div1');

// oDiv.onmousedown = function(ev) {
// var oEvent = ev||window.event;

// var disX = oEvent.clientX-oDiv.offsetLeft;
// var disY = oEvent.clientY-oDiv.offsetTop;

// document.onmousemove = function(ev){
// var ev = ev||window.event;
// oDiv.style.left = ev.clientX-disX+'px';
// oDiv.style.top = ev.clientY-disY+'px';
// }

// document.onmouseup = function() {
// document.onmousemove = null;
// document.onmouseup = null;
// }
// }
balls = document.getElementsByTagName('div');
var ball = new Drop('div1');
ball.fnautomove();
ball.pz(balls);
var ball2 = new LimitDrop('div2');
ball2.fnautomove();
ball2.pz(balls);
// var ball3 = new Drop('div3');
// ball3.fnautomove();
// // ball3.pz(balls);
// var ball4 = new Drop('div4');
// ball4.fnautomove();
// ball4.pz(balls);
// new LimitDrop('div2').fnautomove();
}

function Drop(id) {
this.disX = 0;
this.disY = 0;
this.speedX = 1;
this.speedY = 1;
var _this = this;

this.oDiv = document.getElementById(id);

this.oDiv.onmousedown = function(ev) {
_this.fndown(ev);

return false;
}
}

Drop.prototype.fndown = function(ev){
var e = ev||window.event;
this.disX = e.clientX-this.oDiv.offsetLeft;
this.disY = e.clientY-this.oDiv.offsetTop;
var _this = this;

document.onmousemove = function(ev){
_this.fnmove(ev);
}

document.onmouseup = function(){
_this.fnup();
}
}
Drop.prototype.fnmove = function(ev){
var e = ev||window.event;

this.oDiv.style.top = e.clientY-this.disY+'px';
this.oDiv.style.left = e.clientX-this.disX+'px';
}
Drop.prototype.fnup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
Drop.prototype.fnautomove = function() {
var _this = this;
setInterval(function(){
var top = _this.oDiv.offsetTop;
var left = _this.oDiv.offsetLeft;
if(top<0||top>document.documentElement.clientHeight-_this.oDiv.offsetHeight) {
_this.speedY = -_this.speedY;
}
if(left<0||left>document.documentElement.clientWidth-_this.oDiv.offsetWidth){
_this.speedX = -_this.speedX;
}
top += _this.speedY;
left+=_this.speedX;
_this.oDiv.style.top = top+'px';
_this.oDiv.style.left = left+'px';
},10)
}

Drop.prototype.pz = function(balls){
var _this = this;
setInterval(function() {
var zjc = [];
for(var i = 0;i<balls.length-1;i++){
var y =(parseInt(balls[i].offsetTop)+parseInt(balls[i].offsetHeight)/2)-(parseInt(balls[i+1].offsetTop)+parseInt(balls[i+1].offsetHeight)/2);
var x = (parseInt(balls[i].offsetLeft)+parseInt(balls[i].offsetWidth)/2)-(parseInt(balls[i+1].offsetLeft)+parseInt(balls[i+1].offsetWidth)/2);

// console.log(x)
zjc.push(Math.sqrt(x*x+y*y));
}
console.log(zjc)
for(var j=0;j<zjc.length;j++){
if(zjc[j]<200){

_this.speedX = -_this.speedX;

// _this.speedY = -_this.speedY
}
}
},0)
}

function LimitDrop(id) {
Drop.call(this,id);
this.speedX = -1;
this.speedY = -1;
}
for(var i in Drop.prototype){
LimitDrop.prototype[i] = Drop.prototype[i];
}

LimitDrop.prototype.fnmove = function(ev) {
var e = ev||window.event;
var left = e.clientX-this.disX;
var top = e.clientY-this.disY;
if(left<0){
left = 0;
}
else if(left>document.documentElement.clientWidth-this.oDiv.offsetWidth){
left = document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
if(top<0){
top = 0;
}
else if(top>document.documentElement.clientHeight-this.oDiv.offsetHeight) {
top = document.documentElement.clientHeight-this.oDiv.offsetHeight;
}

this.oDiv.style.top = top+'px';
this.oDiv.style.left = left+'px';
}



</script>

</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
<!-- <div id="div3">3</div>
<div id="div4">4</div> -->

</body>
</html>

我的项目

Posted on 2016-09-09

活力广东

我的链接地址:

http://daili-11.github.io/vigour/index.html(响应式加点小动画)

100°享乐网

我的链接地址:

http://daili-11.github.io/yibaidu/index.html(pc端加点小动画)

游戏

游戏(1):躲避障碍

http://daili-11.github.io/hide/index.html(用到touch.js)

游戏(2):微信打飞机

http://daili-11.github.io/fly/index.html(利用canvas)

游戏(3):寻找徐峥

http://daili-11.github.io/vivo/index.html

游戏(4):贪吃蛇

http://daili-11.github.io/snake/foolishsnake.html(利用canvas)

http://daili-11.github.io/snake/index.html

移动端兼pc端网站

网站(1):精英吧

http://daili-11.github.io/jingyingba/Index/index.html

网站(2):写意

http://daili-11.github.io/xieyi/index.html(响应式布局)

网站(3):兔购移动端

http://daili-11.github.io/shopping/html/help.html

http://daili-11.github.io/shopping/html/visual.html

http://daili-11.github.io/shopping/html/classify.html

http://daili-11.github.io/shopping/html/menu.html

http://daili-11.github.io/shopping/html/video.html

http://daili-11.github.io/shopping/html/loading.html

http://daili-11.github.io/shopping/html/set.html

http://daili-11.github.io/goshopping/html/login.html

http://daili-11.github.io/goshopping/html/search.html

http://daili-11.github.io/goshopping/html/self.html

http://daili-11.github.io/goshopping/html/someone.html

http://daili-11.github.io/goshopping/html/register.html

http://daili-11.github.io/goshopping/html/buyCar.html

http://daili-11.github.io/goshopping/html/order.html

http://daili-11.github.io/tab/html/select.html

http://daili-11.github.io/tab/html/do.html

http://daili-11.github.io/tab/html/xiangqing.html

http://daili-11.github.io/tab/html/danpin.html

http://daili-11.github.io/rabbit/html/findcircle.html

http://daili-11.github.io/rabbit/html/zanshang.html

http://daili-11.github.io/rabbit/html/publish.html

http://daili-11.github.io/rabbit/html/focus.html

网站(4):团队

one:关于体育的

http://daili-11.github.io/one/html/index.html

http://daili-11.github.io/one/html/news.html

two:关于钻石的

http://daili-11.github.io/two/html/index.html

http://daili-11.github.io/two/html/renqi.html

http://daili-11.github.io/two/html/details.html

three:关于服装的

http://daili-11.github.io/three/index.html

four:关于耳机的

http://daili-11.github.io/four/html/james.html

http://daili-11.github.io/four/html/james2.html

http://daili-11.github.io/four/html/james3.html

http://daili-11.github.io/four/james4.html

five:关于冲浪的

http://daili-11.github.io/five/demo2.html

http://daili-11.github.io/five/index.html

six:关于健身俱乐部的

http://daili-11.github.io/six/inter.html

http://daili-11.github.io/six/index.html

seven:关于影像仪器的

http://daili-11.github.io/seven/index.html

eight:关于婚纱摄影的

http://daili-11.github.io/eight/index.html

http://daili-11.github.io/eight/detail.html

nine:关于蛋糕甜点的

http://daili-11.github.io/nine/gallery.html

http://daili-11.github.io/nine/index.html

http://daili-11.github.io/nine/menu.html

ten:LONGBORAD.CN

http://daili-11.github.io/ten/index.html 主页

http://daili-11.github.io/twelve/index.html 商城

eleven:三毛摄影

http://daili-11.github.io/eleven/sanmao.html

http://daili-11.github.io/eleven/sd.html

http://daili-11.github.io/eleven/yushou.html

css3动画

http://daili-11.github.io/periodic/periodic.html

http://daili-11.github.io/periodic/3d.html

框架swiper效果

http://daili-11.github.io/swiper/index.html

http://daili-11.github.io/dream/index.html

用到了zepto.min.js touch.js Swiper.min.js

程序员常用网址

Posted on 2016-09-08

视频学习网址:

1、猿代码 http://www.ydma.cn/

2、慕课网 http://www.imooc.com/

3、麦子学院 http://www.maiziedu.com/

4、极客学院 http://www.jikexueyuan.com/

5、CSDN网 http://edu.csdn.net/

模拟环境学习网址:

1、计蒜客 http://www.jisuanke.com/

2、实验楼 https://www.shiyanlou.com/

资源网站:

1、什么都有的网站 https://github.com/

2、前端素材资源网 http://www.iguoguo.net/

3、程序员网址大全 http://www.tnten.com/

3、微信学习网站

http://www.cnblogs.com/txw1958/p/wechat-tutorial.html

4、微信开发官方文档

http://mp.weixin.qq.com/wiki/home/

5、图灵机器人

http://www.tuling123.com/openapi/cloud/home.jsp

6、免费资源部落

http://www.freehao123.com/

7、免费在线客服系统

http://www.54kefu.net/

8、类似w3c的网站

http://www.runoob.com/

前端框架网站:

1、Bootstrap中文网 http://www.bootcss.com/

2、jQuery插件网(有大量插件)

http://www.jq22.com/

3、jQuery、HTML5

http://www.htmleaf.com/

4、移动端的jQuery

http://zeptojs.com/

6、实现滑动效果的JS

https://github.com/thebird/swipe

7、实现多点触摸的JS

http://hammerjs.github.io/

8、QUOJS

http://quojs.tapquo.com/

9、图标绘制工具库JS

http://www.bootcss.com/p/chart.js/

10、国内弹窗JS插件

http://lab.seaning.com/

11、前端资源网站

http://www.js-css.cn/

12、前端开发仓库

http://code.ciaoca.com/

上传插件:

1、http://www.dropzonejs.com/

2、http://www.uploadify.com/

程序员面试题:

1、牛课网 http://www.nowcoder.com/

翻墙软件推荐:

1、lantern http://www.getlantern.org/

弹窗对话框插件:

1、Larer http://layer.layui.com/

2、artDialog

http://lab.seaning.com/index.html

图片裁剪插件:

1、jscrop

http://jcrop.org/

http://www.cnblogs.com/xiaoyao2011/archive/2012/06/29/Jcrop.html

表单验证

1、http://validform.rjboy.cn/

基于bootstrap后台框架:

1、ACE

2、Amaze

http://www.js-css.cn/divcss/admin/Amaze/admin-table.html

蘑菇街开源的一款企业办公及时通信软件:

https://github.com/mogutt/README

http://tt.mogu.io/

使用PHP+Swoole实现的网页即时聊天工具

https://github.com/matyhtf/php-webim

PHP聊天框架:

http://www.workerman.net/

收集了有关互联网相关信息(RFC)

http://oss.org.cn/man/develop/rfc/default.htm

移动H5前端性能优化指南

Posted on 2016-09-01

概述

1
2
3
4
5
6
7
8
1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点,首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
6. 基于第五点,要合理处理代码减少渲染损耗
7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能

优化指南

[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

· 减少HTTP请求

1
2
3
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片,使用雪碧图

· 缓存

1
2
3
4
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)
a) 缓存一切可缓存的资源
b) 使用长Cache(使用时间戳更新Cache)
c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript

1
2
3
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip
a) 压缩(例如,多余的空格、换行符和缩进)
b) 启用GZip

· 无阻塞

1
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载

· 使用首屏加载

1
首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化

· 按需加载

1
2
3
4
5
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量
PS:按需加载会导致大量重绘,影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载

· 预加载

1
2
3
4
大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面。但Loading时间过长,会造成用户流失
对用户行为分析,可以在当前页加载下一页资源,提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading(如提前加载下一页)

· 压缩图片

1
2
3
4
5
6
7
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示
PS:过度压缩图片大小影响图片显示效果
a) 使用智图( http://zhitu.isux.us/ )
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))

· 减少Cookie

1
Cookie会影响加载速度,所以静态资源域名不使用Cookie

· 避免重定向

1
重定向会影响加载速度,所以在服务器正确设置避免重定向

· 异步加载第三方资源

1
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源

[脚本执行优化]

1
脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意

· CSS写在头部,JavaScript写在尾部或异步

· 避免图片和iFrame等的空Src

1
空Src会重新加载当前页面,影响速度和效率

· 尽量避免重设图片大小

1
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能

· 图片尽量避免使用DataURL

1
DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长

[CSS优化]

· 尽量避免写在HTML标签中写Style属性

· 避免CSS表达式

1
CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式

· 移除空的CSS规则

1
空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则

· 正确使用Display的属性

1
2
3
4
5
Display属性会影响页面的渲染,因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float

· 不滥用Float

1
Float在渲染时计算量比较大,尽量减少使用

· 不滥用Web字体

1
Web字体需要下载,解析,重绘当前页面,尽量减少使用

· 不声明过多的Font-size

1
过多的Font-size引发CSS树的效率

· 值为0时不需要任何单位

1
为了浏览器的兼容性和性能,值为0时不要带单位

· 标准化各种浏览器前缀

1
2
3
a) 无前缀应放在最后
b) CSS动画只用 (-webkit- 无前缀)两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种,(-o-Opera浏览器改用blink内核,所以淘汰)

· 避免让选择符看起来像正则表达式

1
高级选择器执行耗时长且不易读懂,避免使用

[JavaScript执行优化]

· 减少重绘和回流

1
2
3
4
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style,使用classList代替className
c) 避免使用document.write
d) 减少drawImage

· 缓存Dom选择与计算

1
每次Dom选择都要计算,缓存他

· 缓存列表.length

1
每次.length都要计算,用一个变量保存这个值

· 尽量使用事件代理,避免批量绑定事件

· 尽量使用ID选择器

1
ID选择器是最快的

· TOUCH事件优化

1
使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作

[渲染优化]

· HTML使用Viewport

1
2
Viewport可以加速页面的渲染,请使用以下代码
<meta name="viewport" content="width=device-width, initial-scale=1">

· 减少Dom节点

1
Dom节点太多影响页面的渲染,应尽量减少Dom节点

· 动画优化

1
2
3
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)

· 高频事件优化

1
2
3
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
b) 增加响应变化的时间间隔,减少重绘次数

· GPU加速

1
2
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用
PS:过渡使用会引发手机过耗电增加

前端综合学习

. https://github.com/jsfront/src/blob/master/qq.md

我的技术网站

.https://segmentfault.com/u/daily_daili

hexo

Posted on 2016-08-26

hexo的简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
我只会简单的使用,毕竟英语不好也是个大问题,所以不要嫌弃它哦!

搭建Hexo

首先就是搭建Hexo

由于网上教程很多所以我就不讲啦,直接给个链接就OK啦

www.jianshu.com/p/06c0fb6f8b4d

搭建完成以后,就是开始编写啦,编写也有一些工具,这里我用的是MacDown,就是下面那个

MacDown logo

编辑文章

下面就讲编辑文章的故事

文章题目的写法(文章题目会变成网站的一个目录列表,最好好好取名方便阅读)

(3个-)
title: 你的文章题目
(3个-)

文章目录-这里的目录自己生成你只要编辑你目录的内容就可以了(这里是每篇文章的目录,相当于文章的结构块)


(3个#) 你的目录1
内容1

(3个#) 你的目录2
内容2

(3个#) 你的目录3
内容3

你的目录1
内容1

你的目录2
内容2

你的目录3
内容3

需要注意的是 (3个#) 和 你的目录1 中间要空格,否则页面输出
(3个#)你的目录1

注:title是标题,(3个#) 是二级标题,(4个#) 三级标题

(1个*)相当于强调(注:多少*开头就多少*结尾),效果如下

(1个*)我是谁(1个*)
我是谁

(2个*)我是谁(2个*)
我是谁

(3个*)我是谁(3个*)
我是谁

这里需要注意的是,在编辑的时候直接输*号,在页面里是看不见的,解决办法就是

\*
输出*

超链接的加入

<你的链接地址>
如

<http://www.jianshu.com/p/06c0fb6f8b4d>

代码框

(3个`)+html
<html>
<head></head>
<body></body>
</html>
(3个`)+
输出

<html>
<head></head>
<body></body>
</html>
(3个`)+css
.a{
width:100px;
}
(3个`)
输出

.a{
width:100px;
}
(3个`)+js
window.onload = function(){
}
(3个`)
输出

window.onload = function (){
}
文本框
(3个`)
文本框
(3个`)
输出

文本框

注:当该行存在一个文本缩进时,同样有文本框的效果

页面风格的改变

首先先找到一个你喜欢的样式风格

推荐看这个:https://www.zhihu.com/question/24422335

找到喜欢的样式风格,先要克隆到你的目录中,样式的存放一般在你的hexo文件夹里的themes,所以我们只需找你的hexo文件夹就可以克隆进去

打开终端,进入你的hexo文件夹

终端输入 cd 你的hexo文件夹存放目录 ,然后回车(Enter)

例(我的hexo文件夹命名为hexo,放在桌面)

$ cd desktop/hexo

进入目录以后就克隆

终端输入 git clone <你的库> themes/<样式名> ,然后回车(Enter)

如下(这里我使用的是网上别人的库,你也可以参考使用)

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

$ cd themes/next

$ git pull

注:
https://github.com/iissnan/hexo-theme-next--next的库
next–样式名

编译

文档编辑完成后,就是编译啦~

编译还是在终端,还是在你的hexo文件夹目录下编译

$ hexo g

编译完成

如果想要根据IP打开页面,则需要打开服务器,hexo自带有在终端输入

$hexo s

即可

还有一种就是上传到github(github是什么就自己扒,我就不讲了)
上传到github只需上传你的hexo文件夹里的public文件夹下所有的文件就可以了,每一次更新就上传替换一次,这样简单的个人博客就完成啦!
鼓掌!!!!

function

Posted on 2016-08-26

封装好的一些有用函数

四则运算的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function _equals(per_number , next_number, operation){
switch (operation){
case '+':
per_number += next_number;
break;
case '-':
per_number -= next_number;
break;
case '*':
per_number *= next_number;
break;
case '/':
if(next_number ==0 ){
per_number = null;
}else{
per_number /= next_number;
}
break;
}
if(per_number == null){
return NaN;
}else{
return per_number;
}
}

查找字符的个数

1
2
3
4
5
6
7
8
9
10
11
function indexofFn(str,font){
var i = 0 ;
var sum = 0;
while (str.indexOf(font,i) > -1) {
//在找到的时候循环
sum ++;//找到后+1
i=str.indexOf(font,i) + 1;
//在位置之后再开始查找
}
return sum;
}

最大值(arguments)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//方法1
function max(){
var max = arguments[0];//记录第一个值,假装它是最大的
for (var i=1; i<arguments.length;i++) {
//记录了第一个,就从第二个开始比较
if(max<arguments[i]){
//判断它是否真的最大,一个一个去比较
max = arguments[i];//比它大就替换
}
}
return max;//比较结束后返回最大值
}

//方法2
function max(){
for (var i=0; i<arguments.length;i++) {
//从第一个开始
if(arguments[i]>arguments[i+1]){
//第一个和第二个比较
arguments[i+1] = arguments[i];
//第二个小于第一个,替换第二个,再与第三个比较
}
}
return arguments[i-1];//比较结束后返回最大值
}
//调用
alert(max(5,8,6,9,1,3,7,2,4));

随机数

1
2
3
4
5
6
7
8
/*myrandom(min,max) min到max范围的随机数*/

function myrandom(min,max){
var rnd = Math.round(Math.random()*(max-min)+min);
return rnd;
}
//调用
alert(myrandom(1,2));

倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
function getTimeFn(year,month,day){
setInterval(function(){
var oDate = new Date();
//默认当前时间
var d = new Date(year+"/"+month+"/"+day);
var time = parseInt((d-oDate)/1000);
var day = parseInt(time/86400);
var h = parseInt(time%86400/3600);
var m = parseInt(time%3600/60);
var s = parseInt(time%60);
return [day,h,m,s];
},1000);
}

数组排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sort(arr){
for (var i=0; i<arr.length;i++) {
//遍历每一个
for (var j=i+1; j<arr.length;j++) {
//比较每一个
if(arr[i]-arr[j]>0){
//判断大小
//调转位置
var a = arr[i];
arr[i] = arr[j];
arr[j] = a;
}
}
}
return arr;//结束返回数组

}
var arr = [18,5,9,6,4,19,3,2,7,1,8,0];
document.write(sort(arr));

清除数组中的重复字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var arr=[5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]
//splice(5,1)

function noRepeat(arr1) {
for (var i = 0; i < arr1.length; i++) {
//每个遍历一次
for (var j = i+1; j < arr1.length; j++) {
//与后面每个比较
if (arr1[i]==arr1[j]) {
arr1.splice(j,1);
//相同清除
j--;
//清除后,位置变化,j就要返回上一个
}
}
}
return arr1;//结束返回数组
}
var arr1 = noRepeat(arr);
alert(arr1);

var arr=[5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];

function noRepeat(arr1) {
var newArr = [];//定义存放数组中不相同的值
newArr.push(arr1[0])//初始化
for (var i = 1; i < arr1.length; i++) {
//每个遍历一次
for (var j = 0; j < newArr.length; j++) {
//与后面每个比较
if (newArr[j]==arr1[i]) {
/*判断新数组的值是否与数组当前值相等,是就退出当前循环*/
break;
}
}
/*判断新数组是否完全遍历,如果不是说明新数组的值与数组当前值相等,则不添加入新数组,否则反之*/
if (j==newArr.length) {
newArr.push(arr1[i]);
// newArr[newArr.length] = arr[i]
}
}
return newArr;//结束返回数组
}
var arr1 = noRepeat(arr);
alert(arr1);

倒数计时器

1
2
3
4
5
6
7
8
9
10
function timerFn(n){
var timer = setInterval(function(){
n-=0.02;//每20毫秒-0.02
if(n <= 0){
clearInterval(timer);
n=0;//有偏差,强制为0
}
return n.toFixed(2);//取小数点后两位
},20)//20毫秒每次,五次就获得一秒,减少偏差
}

随机打乱数组内容

1
2
3
4
function sortFn(arr){
arr.sort(function(){return Math.random()-0.5});
return arr;
}

图片移动切换动画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function moveFn(){
move_bol = true;
//记录动画开始
var start = parseInt(inner.style.left) || 0;
//初始位置
var change = -(inner.children[0].offsetWidth)*index-start;
//移动的距离
var t = 0;//第几步开始
var endT = 30;//执行步数

var timer = setInterval(function(){
t++;//每30毫秒加一步
if(t >= endT){
clearInterval(timer);//endT步后清除计时器
move_bol = false;//记录动画结束
}
//调用了贝塞尔曲线,详情请看图片切换案例
var l = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
inner.style.left = l+'px';//移动
},30)
}



function moveFn(){
move_bol = true;//记录动画开始
var start = parseInt(inner.style.left) || 0;//初始位置
var change = -(inner.children[0].offsetWidth)*index - start;//移动的距离
var t = 0;//第几步开始
var endT = 30;//执行步数

var timer = setInterval(function(){
t+=1;
//每30毫秒加一步
if(t>=endT){
clearInterval(timer);//endT步后清除计时器
move_bol = false;//记录动画结束
}
var l = start + (change*t/endT);
inner.style.left = l+'px';//移动
},30)
}

图片淡入切换动画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showFn(before){
move_bol = true;//记录动画开始
var t = 0;
for(var i=0; i< img.length; i++){
img[i].style.zIndex = 0;
if(before!=i){
img[i].style.opacity = 0;
}
}
img[index].style.zIndex = 1;
var timer = setInterval(function(){
t++;
if(t >= 50){
clearInterval(timer);
move_bol = false;//记录动画结束
}
img[index].style.opacity = t/50 ;
},30)
}

获取标签最终top和left以及获取标签计算后的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*获取标签最终top和left obj 需要获取的标签对象 返回json{top:xxx,left:xxxxx}*/

function offsetFn(obj) {
var t = 0;
var l = 0;
while(obj){
/*询问对象是否存在,存在才执行代码块 边框默认不添加进去,需要自己遍历添加*/
var bT = parseInt(getStyle(obj,"borderTopWidth"));
//borderTop的宽度
var bL = parseInt(getStyle(obj,"borderLeftWidth"));
//borderLeft的宽度

t += obj.offsetTop + bT ;
l += obj.offsetLeft + bL;
obj = obj.offsetParent;//父级替换子级
}
return {"top":t,"left":l};//返回json
}

/*获取标签计算后的样式 参数obj:标签元素 attr:样式属性currentStyle:IE可标识,非IE不可标识 getComputedStyle:IE不可标识,非IE可标识*/

function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}

隐藏当前除子级以外所有的孙子及以下元素(递归的使用)

1
2
3
4
5
6
7
8
9
10
/*findUl 找到孙子并隐藏孙子及孙子下所有的子级 obj 孙子的爷爷利用递归 逐级找到孙子以及孙子下所有的子级,并隐藏所有找到的子级*/
function findUl(obj){
var lis = obj.children;//获取元素儿子
for (var i=0; i < lis.length; i ++) {
if(lis[i].children[0]){
findUl(lis[i].children[0]);//递归
lis[i].children[0].style.display = 'none';//找完后,隐藏元素儿子
}
}
}

节点的查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//查找下一个节点函数 obj参数为当前标签元素

function nextFn (obj) {
return obj.nextElementSibling?obj.nextElementSibling:obj.nextSibling;
}
//调用
nextFn(li[1]).style.background = 'burlywood';


//查找上一个节点函数 obj参数为当前标签元素
function previousFn(obj){
return obj.previousElementSibling?obj.previousElementSibling:obj.previousSibling;
}
//调用
previousFn(li[4]).style.background = 'skyblue';

//查找第一个子节点函数 obj参数为第一个子节点的父级标签元素

function firstFn(obj){
return obj.firstElementChild?obj.firstElementChild:obj.firstChild;
}
//调用
firstFn(ul).style.background = 'palegreen';


//查找最后一个子节点函数 obj参数为最后一个子节点的父级标签元素

function lastFn(obj){
return obj.lastElementChild?obj.lastElementChild:obj.lastChild;
}
//调用
lastFn(ul).style.background = 'coral';

//自定义封装一个通过标签名的函数 tag参数为大写标签名 范围是全文的标签 返回一个数组

function TagName (tag) {
var childs = wrap.childNodes;
var arr = [];
for (var i=0;i<childs.length;i++) {
//nodeType:节点类型 nodeName:节点名
if (childs[i].nodeType == 1 && childs[i].nodeName == tag) {
arr.push(childs[i]);
}
}
return arr;
}

改变元素滚动条高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 函数注释 改变元素滚动条高度动画函数 end参数是最终高度,不可为空 fn参数是计时器结束后执行的回调函数,可为空
function myFn(end,fn){
var start = document.body.scrollTop || document.documentElement.scrollTop ;//初始高度
var change = end - start;//改变的高度值
var t = 0;//第几步开始
var endT = 30;//执行步数
var timer = setInterval(function(){
//设置计时器
t++;//每30毫秒加一步
if(t >= endT){
//当到达第30步时执行if里的代码块
clearInterval(timer);//endT步后清除计时器
//如果fn是一个函数则执行fn(),否则不执行
fn && fn();
}
var sTop = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
document.body.scrollTop = sTop;
document.documentElement.scrollTop = sTop;
},30);
}

预加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* loadImageFn 预加载图片函数 arr参数是图片数组 fn是过程回调函数 over是结束回调函数 IE6判断不了 */

function loadImageFn (arr,fn,over) {
var index = 0;//加载第几张
for (var i=0; i < arr.length; i++) {
var img = new Image();//定义一个图片的对象
img.src = 'img/'+ arr[i];//设置路径
img.onload = function(){
index ++; //加载
if (index == arr.length) {
//图片加载完成后
alert('加载完成!')
over && over();//结束回调函数
}
fn && fn(index);//过程回调函数
}
}
}

函数 & 变量的作用域 & eval

1
2
3
函数

函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// function show() {
// alert("函数");
// }
// show() 只有函数被调用,才会被之执行


var show = function () {
alert("函数");
return 1;//函数结束后的返回值,如果没有就是undefined
alert("内容");//return 后面的内容不会再执行
}
alert(show())
//return 语句还有一个功能就是退出当前函数,注意和break 的区别。PS:break 用在循环和switch 分支语句里。

//传参
var show = function (a,b) {
var a = 7;//模拟
var b = 9;//模拟
var sum = a + b;
return sum;
}

// alert(show(7,9))
alert(show(15,38))

//利用arguments写一个找最大值的变量
function max() {
var max = arguments[0];
// alert(arguments.length);
for (var i = 1; i < arguments.length; i++) {
if (max<arguments[i]) {
max = arguments[i];
}
}
return max;
}
alert(max(1,2,3,35,4,5,6,7,8))

//匿名函数
var num = (
function(a,b){
//alert(a+b);
return a+b;
}
)(3,4);
alert(num);

变量的作用域

1
2
3
变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var a = 5;//全局变量

/*函数里面的变量定义了就是局部变量,只能在当前函数里面使用*/

function show() {
var a = 10;
alert(a);
}
show();//弹10
alert(a);//弹5

var a = 15;
function show1() {
a = 10;
function show2() {
alert(a)//第一次弹undefined
var a = 5;
alert(a);//第二次弹5
}
show2();
alert(a);//第三次弹10
}
show1()
alert(a)//第四次弹15

作用域练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var a = 6;
setTimeout(function () {
alert(a);//66
a = 666;
}, 1000);

a = 66;

var a = 6; //a=6
(function(){
(function () {
alert(a);
a = 666;//a = 666
})();
})();
a = 66;
alert(a)//a =66

//匿名函数
var num = (function (a,b) {
// alert(a+b);
return a+b;
})(3,4)

alert(num)//弹7

function show(a,b) {
alert(a+b)//弹7
}
show(3,4);

闭包

JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*什么闭包:function函数就是一个闭包,闭包里面的变量是封闭的,函数外面不可以获取。主要功能:function里面再嵌套一个函数,把这个函数返回出去 赋给外面的变量,函数外面就可以获取到函数里面的内容 注意的问题:闭包要注意内存溢出的问题,不可以乱用,需要用得才用*/

function a() {
var i = 5; // a_i;
function b(n) {
i += n;//a_i
return i;
}
return b;
}
var c = a();
c(5)
alert(c(5))//15

// alert(c(1));6
// alert(c(5));11

闭包有什么作用?

1
2
3
4
5
简而言之,闭包的作用就是在a执行完并返回后,闭包使得javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。

案例练习

去重复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var arr = [5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]
//splice(5,1)

function noRepeat() {
for (var i = 0; i < arr.length; i++) {
//每个遍历一次
for (var j = i+1; j < arr.length; j++) {
//与后面每个比较
if (arr[i]==arr[j]) {
arr.splice(j,1)//相同清除
j--;//清除后,位置变化,j就要返回上一个
}
}
}
return arr;//结束返回数组
}
var arr = noRepeat();
alert(arr);

var arr = [5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]
//splice(5,1)
function noRepeat() {
var newArr = [];//定义存放数组中不相同的值
newArr.push(arr[0])//初始化
for (var i = 1; i < arr.length; i++) {
//每个遍历一次
for (var j = 0; j < newArr.length; j++) {
//与后面每个比较
if (newArr[j]==arr[i]) {
//判断新数组的值是否与数组当前值相等,是就退出当前循环
break;
}
}
/*判断新数组是否完全遍历,如果不是说明新数组的值与数组当前值相等,则不添加入新数组,否则反之*/
if (j==newArr.length) {
newArr.push(arr[i]);
// newArr[newArr.length] = arr[i]
}
}
return newArr;//结束返回数组
}
var arr = noRepeat();
alert(arr);

排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var arr = [5,3,2,4,8,1,7,6];

function px() {
document.write("i="+0+";j="+0+"-"+arr+"<br>");
for (var i = 0; i < arr.length; i++) {
for (var j = i+1; j < arr.length; j++) {
if (arr[i]>arr[j]) {
var num = arr[i];
arr[i]=arr[j];
arr[j]=num;
}
document.write("i="+i+";j="+j+"-"+arr+"<br>");
}
document.write("<br>");
}
return arr;

}

var arr = px();
alert(arr);

eval

1
2
3
eval() 函数可将字符串转换为代码执行,并返回一个或多个值

eval调用时,实例为eval( “ javascript代码 “ )
1
2
3
var str = "function(){alert('a');}“;
str = eval(str);
str();

eval()的返回值

1
2
3
4
5
eval()的返回值遵循以下规则:

1.如果eval()的参数不是字符串,那么eval()将直接返回参数。
2.如果eval()的参数是字符串,那么eval()将这个字符串解析成代码后进行执行,并返回最后一行代码执行的结果。
3.如果字符串无法解析成合法的代码,eval()将抛出错误。

日期对象-Date && 定时器

Date

时间戳:是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// var oDate = new Date(2015,5,30);
// var oDate = new Date('2015-6-29');
var oDate = new Date()//当前时间


var year = oDate.getFullYear();//获取年份
var month = oDate.getMonth();//获取月份 0-11
var day = oDate.getDate();//获取多少号
var week = oDate.getDay();
//返回星期几,0 表示星期日,6 表示星期六
var hour = oDate.getHours();//获取时
var minutes = oDate.getMinutes()//获取份
var second = oDate.getSeconds();//获取秒
var time = oDate.getTime();//获取时间戳
document.body.innerHTML = '';
document.write("年份:"+year+"<br>")
document.write("月份:"+month+"<br>")
document.write("日:"+day+"<br>")
document.write("星期:"+week+"<br>")
document.write("时:"+hour+"<br>")
document.write("分:"+minutes+"<br>")
document.write("秒:"+second+"<br>")
document.write("时间戳:"+time+"<br>")

setTimeout

1
2
3
4
5
/*一次性定时器 setTimeout(a,b); a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/

setTimeout(function(){
alert('一次性定时器');
},1000)

setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*循环性定时器 setInterval(a,b); a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/

// setInterval(function(){
// alert('循环性定时器');
// },1000)
var i = 0;
var timer = setInterval(function(){
i++;
if (i>5) {
clearInterval(timer);
} else {
//alert('循环性定时器');
}
},1000)

案例

倒计时的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
setInterval(function () {
var oDate = new Date()//当前时间
var d = new Date("2016-6-9");
//计算当前时间到端午节的时间戳 秒数
var time = parseInt((d-oDate)/1000);
//剩余天数 = 秒/(24*60*60)
var day = parseInt(time/86400);
//剩余小时数 = 秒%(24*60*60)/(60*60)
var h = parseInt(time%86400/3600);
//剩余分钟数 = 秒%(60*60)/60
var m = parseInt(time%3600/60);
//剩余秒数 = 秒%60
var s = parseInt(time%60);

document.body.innerHTML = "距离端午节放假还有:"+day+"天-"+h+"小时-"+m+"分"+s+"秒";
},1000)

时钟的实现

HTML部分

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.wrap{
width: 400px;
height: 400px;
border: 1px solid powderblue;
border-radius: 50%;
margin: 100px auto;
position: relative;
box-shadow: 1px 0.5px 1px 3px #87ceeb inset;
font-size: 18px;
}
.wrap .seconds{
width: 15px;
height: 1.5px;
background: paleturquoise;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -2;
box-shadow: 1px 1px 1px skyblue;
}
.wrap .time{
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
background: skyblue;
box-shadow: 1px 1px 1px black;
}
.wrap .time div{
border-radius: 50% 50% 0 0;
z-index: -1;
}
.wrap .seconds:nth-child(5n+1){
width: 20px;
height: 1.5px;
background: black;
}
.wrap .time .s{
width: 2px;
height: 230px;
position: absolute;
background: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(0deg) translateY(-80px);
box-shadow: 1px 1px 2px black;
}
.wrap .time .m{
width: 4px;
height: 200px;
position: absolute;
background: dodgerblue;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(0deg) translateY(-70px);
box-shadow: 1px 1px 2px black;
}
.wrap .time .h{
width: 6px;
height: 180px;
position: absolute;
background: cadetblue;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(0deg) translateY(-60px);
box-shadow: 1px 1px 2px black;
}

JS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//画出时钟
document.write('<div class="wrap">');
for (var i = 0; i < 60; i ++) {
//画出刻度
document.write("<span class='seconds' style='transform: rotate("+i*6+"deg) translate(190px)'></span>")
}
document.write("<div class='time'>")
document.write("<div class='h'></div>");//时针
document.write("<div class='m'></div>");//分针
document.write("<div class='s'></div>");//秒针
document.write("</div>");//类time结束
document.write('</div>');//类wrap结束
//通过类获取时分秒针
var s = document.getElementsByClassName('s')[0];
var m = document.getElementsByClassName('m')[0];
var h = document.getElementsByClassName('h')[0];
timer();//初始分秒的旋转角度
setInterval(function(){
//循坏计时,每秒刷新一次达到时钟效果
timer();
},1000)
function timer(){
//获取当前时分秒的旋转角度
var oDate = new Date();
//秒针一圈60刻度,每秒6度,所以得出每秒旋转6度
s.style.transform = 'rotate('+(oDate.getSeconds()*6)+'deg) translateY(-80px)';
//分针一圈60刻度,每分6度,每秒旋转 秒/360*6*6所以得出每秒旋转oDate.getMinutes()*6+oDate.getSeconds()*0.1度
m.style.transform = 'rotate('+(oDate.getMinutes()*6+oDate.getSeconds()*0.1)+'deg) translateY(-70px)';
//时针一圈12刻度,每时30度,每分旋转 分/360*30*6所以得出每分旋转oDate.getHours()*30+oDate.getMinutes()*0.5度
h.style.transform = 'rotate('+(oDate.getHours()*30+oDate.getMinutes()*0.5)+'deg) translateY(-60px)';
}

browser—浏览器检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
对于网站开发人员来说,浏览器信息和统计数据都是非常重要的。

浏览器信息

Internet Explorer

微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年,并于 1998 年在使用人数上超过了 Netscape。

Netscape

Netscape 是首个商业化的因特网浏览器。它发布于 1994 年。在 IE 的竞争下,Netscape 逐渐丧失了它的市场份额。

Mozilla

Mozilla 项目是从 Netscape 的基础上发展起来的。今天,基于 Mozilla 的浏览器已经演变为因特网上第二大的浏览器家族,市场份额为大约 20%。

Firefox

Firefox 是由 Mozilla 发展而来的新式浏览器。它发布于 2004 年,并已成长为因特网上第二大最流行的浏览器。

Opera

Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世:快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型设备诸如手机和掌上电脑来说,Opera 无疑是首选的浏览器。

Chrome

Chrome 是免费的开源 web 浏览器,它由 Google 开发。该浏览器于 2008 年 9 月发布。

Safari

Safari 是由苹果公司开发的浏览器,适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。

js判断浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = window.navigator.userAgent;
//获取浏览器信息
//查找字符判断浏览器类型
if(a.indexOf('OPR')>-1){
alert('欧朋')
}else if(a.indexOf('Chrome')>-1){
alert('谷歌')
}else if (a.indexOf('Firefox')>-1){
alert('火狐')
}else if('Safari'){
alert('苹果')
}else if('IE 8'){
alert('IE 8')
}

程序猿经典案例之计算器

1
2
3
4
5
6
7
8
9
10
11
思路:

找到按钮
实现数字添加功能
实现运算符功能
实现等于号功能
小数点功能
清除功能
正负数功能
求百分数功能
查漏补缺

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<div class="wrap">
<div id="header">0</div>
<ul id="btns">
<li class="center">AC</li>
<li class="center">+/-</li>
<li class="center">%</li>
<li class="o">/</li>
<li class="center">7</li>
<li class="center">8</li>
<li class="center">9</li>
<li class="o">*</li>
<li class="center">4</li>
<li class="center">5</li>
<li class="center">6</li>
<li class="o">-</li>
<li class="center">1</li>
<li class="center">2</li>
<li class="center">3</li>
<li class="o">+</li>
<li class="center long under">0</li>
<li class="center under">.</li>
<li class="under o">=</li>
</ul>
</div>
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.wrap{
width: 232px;
height: 320px;
border: 1px solid #8e8e8e;
border-radius: 5px;
margin: 50px auto;
}
#header{
width: 100%;
height: 80px;
background: rgba(90,90,90,0.6);
text-align: right;
line-height: 100px;
color: white;
font-size: 60px;
}
#btns{
width: 100%;
height: 100%;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
font-size: 20px;
}
#btns li{
margin: 0;
float: left;
width: 57px;
height: 47px;
text-align: center;
line-height: 47px;
border-bottom: 1px solid #8e8e8e;
background: #d6d6d6;
cursor: pointer;
}
#btns .long{
width: 115px;
}
#btns .center{
border-right: 1px solid #8e8e8e;
}
#btns .o{
background: #f49437;
width: 58px;
color: white;
}
#btns .under{
border-bottom: 0;
height: 48px;
}

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
window.onload = function (){
//获取计算框
var header = document.getElementById('header');
//获取所有按钮
var li =document.getElementsByTagName('li');
//定义上一个数 保存第一个数
var per_number = null;
//定义下一个数 保存第二个数
var next_number = null;
//定义一个字符串类型保存运算符
var operation = '';
//记录符号的类型,1为无,0为运算符,2为等于号
var flag = 0;
//给所有按钮添加点击事件
for (var i=0;i<li.length;i++) {
li[i].onclick = function (){
switch (this.innerHTML){
//清除按钮的点击事件
case 'C':
case 'AC':
//把所有数据以及变量都初始化
per_number = null;
next_number = null;
operation = "";
flag = 0;
header.innerHTML = "0";
break;
//正负切换按钮的点击事件
case'+/-':
header.innerHTML= -1*Number(header.innerHTML);
break;
//百分比的点击事件
case'%':
header.innerHTML = Number(header.innerHTML)/100;
break;
//数字按钮的点击事件
case'1':
case'2':
case'3':
case'4':
case'5':
case'6':
case'7':
case'8':
case'9':
case'0':

if (header.innerHTML == "0" || flag==0 || flag==2) {
/*当计算框为零,或者刚点击完运算符,或者刚点击完等于号时*/
header.innerHTML = this.innerHTML;//赋值
if(flag==2){
//刚点击完等于号时
per_number = null;
//清空第一个数
}
//修改点击符号为数字
flag = 1;
}
else{
//否则拼接字符串
header.innerHTML += this.innerHTML;
}
break;
//四则运算的点击事件
case'+':
case'-':
case'*':
case'/':
if(per_number == null || flag == 2){
/*第一个数为空,或者刚点击完等于号时,第一个数等于计算框里的数字*/
per_number = Number(header.innerHTML);
}else if(operation != '' && flag!=0){
/*运算符不等于空,或者不是刚点击完运算符时,第二个数等于计算框里的数字*/
next_number = Number(header.innerHTML);
_equals(operation);//进行四则运算
}
flag = 0;//修改点击符号为运算符
operation =this.innerHTML;//保存运算符
break;
//等于的点击事件
case'=':
if(operation != ''){
//运算符不为空时
if(flag == 1){
/*刚点击完数字时,第二个数等于计算框里的数字*/
next_number = Number(header.innerHTML);
}
_equals(operation);//进行四则运算
}
flag = 2;//修改点击符号为等于号
break;
//.的点击事件
default:
if (header.innerHTML == "0" || flag==0 || flag==2) {
/*当计算框为零,或者刚点击完运算符,或者刚点击完等于号时,输出0.*/
header.innerHTML = '0'+this.innerHTML;
flag = 1;
}else{
if(header.innerHTML.indexOf('.',0) == -1){
//计算框内没有.时,拼接0.
header.innerHTML += this.innerHTML;
}
}
break;
}
//AC与C的切换
if((li[0].innerHTML == 'AC' || this.innerHTML != li[0].innerHTML) && this.innerHTML!="AC"){
/*清除键内容为 AC或者当前点击不是清除键,和当前点击内容不是AC*/
li[0].innerHTML ='C';//修改清除键内容为C
}else{
li[0].innerHTML ='AC';//修改清除键内容为AC
}
}
}
//文档点击事件,设置计算框自适应字体大小
document.onclick =function(){
if(header.innerHTML.length<8){
//计算框内容长度小于8时,字体大小为60px
header.style.fontSize = "60px"
}else if(header.innerHTML.length<16){
//计算框内容长度大于8小于16时,字体大小为30px
header.style.fontSize = "30px";
}else if(header.innerHTML.length<24){
//计算框内容长度大于16小于24时,字体大小为20px
header.style.fontSize = "20px";
}
else if(header.innerHTML.length<30){
//计算框内容长度大于24小于30时,字体大小为16px
header.style.fontSize = "16px";
}else{
//计算框内容长度大于30时,字体大小为12px
header.style.fontSize = "12px";
}
}
//四则运算的函数
function _equals(operation){
switch (operation){
case '+'://加运算符
per_number += next_number;
break;
case '-'://减运算符
per_number -= next_number;
break;
case '*'://乘运算符
per_number *= next_number;
break;
case '/'://除运算符
if(next_number ==0 ){
//0为被除数时
per_number = null;
//设置计算结果为空
}else{
per_number /= next_number;
}
break;
}
if(per_number == null){
//计算结果为空时,输出非数字NaN
header.innerHTML = NaN;
}else{
header.innerHTML = per_number;
}
}
}

以上例子仅供参考!!!!感谢您的阅读,祝您学习愉快!!

String & dorpdownlist(下拉列表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
String

String 对象
String 对象用于处理文本(字符串)。

String 对象属性

constructor 对创建该对象的函数的引用
length 字符串的长度
prototype 允许您向对象添加属性和方法
String 对象方法

anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

案例:字符串的截取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 400px;
margin: 50px auto;
background: khaki;
padding: 20px;
border: 10px solid gainsboro;
}
</style>

<script type="text/javascript">
//获取内容标签span
//获取点击按钮a
//获取标签内容str
//点击收缩时显示str截取后的内容
//点击展开时显示str全部内容

window.onload =function(){
var span = document.getElementsByTagName('span')[0];
var a = document.getElementsByTagName('a')[0];
var str =span.innerText;
//span完整内容
a.onclick = function (){
if(span.innerHTML == str){
//判断内容是否被截取
span.innerText = str.substring(0,30) + "......";//显示str截取后的内容
a.innerHTML = ">>展开";
}else{
span.innerText = str;
//显示str的内容
a.innerHTML = ">>收缩";
}
}
}

</script>

</head>
<body>
<div>
<span>蓝鸥科技是美国苹果公司AATC官方授权培训机构,是国内专业的移动互联网研发实训基地,致力于iOS、安卓、Unity、HTML5等开发人才的培养。2012年由中国知名移动开发专家刘辉、李静波和崔亚允创立。蓝鸥科技拥有北京、上海、广州、大连、郑州和西安等众多实训中心,合作院校超过500所,战略合作企业800多家。截至目前,在苹果App Store和谷歌商店累计上线1000多款应用和游戏。</span><a href="###">>>收缩</a>
</div>
</body>
</html>

案例 字符串方法以及查找字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串";
/*字符串截取方法substring, substring里面最小参数是0(负数也是0)*/
/*里面的参数是从最小截取到最大的位置(读取时先找到最小,再往最大截取)*/
// var str2 = str.substring(2,5);
// alert(str2);
/*查找的方法 indexOf() 返回位置值 如果找不到返回-1 只会找一次*/
//alert(str.indexOf('字',3));
var i = 0 ;
var sum = 0;
while (str.indexOf('字',i) > -1) {
//在找到的时候循环
sum ++;//找到后+1
i=str.indexOf('字',i) + 1;
//在位置之后再开始查找
}
alert("str中字共有"+sum+"个");
// 1 i=0 位置2>-1 sum ++ ; i = 位置2 +1;
//2 i=3 位置7>-1 sum ++ ; i = 位置7 +1;
//3 i=8 位置13>-1 sum ++ ; i = 位置13 +1;
//...
//2 i=? 位置-1不大于-1 退出循环 弹出对话框

</script>

</head>
<body>
</body>
</html>

案例 字符串与数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "abcdefg";
var arr = ['a','b','c','d','e','f','g'];
//字符串不可以通过下标修改其中的值,只能整体修改
str[3] = "D";
// alert(str);
arr[3] = "D";
// alert(arr);
//字符串变成数组
//split 把字符串劈开变成数组 劈开是按照字符串里的参数
var arr =str.split("d");
//alert(arr[1]);

//charAt 获取字符串里的第几个字符 从0开始
//charCodeAt 获取字符串里的第几个字符的字符Ascii
// alert(str.charAt(2));
//alert(str.charCodeAt(2));

//alert(str.toLowerCase());变成小写
//alert(str.toUpperCase());变成大写
</script>

</head>
<body>
</body>
</html>

dorpdownlist(下拉列表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.droplist input{
width: 150px;
height: 30px;
font-size: 14px;
font-weight: lighter;
text-align: center;
border: 1px solid cadetblue;
border-radius: 6px;
border-color: cornflowerblue;
box-shadow: 0.1px 0.1px 1px 0.5px cadetblue;
background: white;
}
.droplist ul{
width: 150px;
border: 1px solid cadetblue;
border-radius: 6px;
list-style: none;
color: #333;
text-align: center;
margin-top: 5px;
padding: 0;
}
.droplist ul li{
width: 98%;
padding: 10px 0;
margin: 0 auto;
border-bottom: 1px solid #ccc;;
}
.droplist ul li:hover{
background: rgba(244,244,244,0.75);
}
.droplist ul li:nth-child(3){
border: 0;
}
</style>

<script type="text/javascript">
window.onclick=function (){
//做法思路
//1.获取元素
//2.点击请选择-列表显示
//3.点击列表-选择框内容 = 你点击列表框的内容
//4.列表消失
//这里获取document.getElementsByClassName('btn')是一个数组:['按钮'],而我们要获取的是'按钮',所以读取是['按钮'][0],也就是document.getElementsByClassName('btn')[0]
var btn =document.getElementsByClassName('btn')[0];
var list =document.getElementById('list');
var li = list.getElementsByTagName('li');//获取list里的<li>集合

//选择按钮
btn.onclick = function(){
if(list.style.display != "block"){
//判断list是否已经隐藏
//是,就显示
list.style.display = 'block';
}else{
//否,就隐藏
list.style.display = 'none';
}
}
for (var i=0; i<li.length; i++) {
//循环,给每个<li>添加点击事件
li[i].onclick = function (){
/*注:input里的内容获取是-input.value,其他标签的内容获取是-标签.innerHTML*/
btn.value = this.innerHTML;/*将当前<li>里的内容赋值给btn*/
list.style.display = 'none';
//列表消失
}
}

}
</script>

</head>
<body>
<div class="droplist">
<input type="button" class="btn" value="请选择" />
<ul id="list" style="display: none;">
<li>栗子</li>
<li>李子</li>
<li>芒果</li>
</ul>
</div>
</body>
</html>

Math & Array(数组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Math

Math对象允许您执行数学任务。
Math对象包括几个数学方法。

Math 对象属性

E 返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2 返回 2 的自然对数(约等于0.693)。
LN10 返回 10 的自然对数(约等于2.302)。
LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)。
LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。
PI 返回圆周率(约等于3.14159)。
SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)。
SQRT2 返回 2 的平方根(约等于 1.414)。
Math 对象方法

abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。

解析:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
console.log(Math);
//ceil:ceil() 向上取整5.00001,取6
//var num = 5.00001;
//alert(Math.ceil(num));

//floor:floor()向下取整,5.9999999,取5
//var num1 = 5.9999999;
//alert(Math.floor(num));

/*Math.min()和Math.max()可以用来查找的参数列表中的最低或最高值*/
//max:max()
//alert(Math.max(1,9,5,2,3));//9
//min:min()
//alert(Math.min(1,9,5,2,3));//1

//pow:pow()求次方数
// alert(Math.pow(2,3));8----2的3次方
//random:random()随机数,取值在0-1之间,不包括0和1 最小0.0000000......1 最大0.99999...9
//alert(Math.random());

//栗子 0-10最小值
//0.00001*10 = 0.0001 四舍五入得 0
//0.99999*10 =9.9999 四舍五入得 10
//0-10
var rnb = Math.round(Math.random()*10);
//1-10
var rnb1 = Math.ceil(Math.random()*10);
//0-9
var rnb2 = Math.floor(Math.random()*10);
//30-60
var rnb3 = Math.round(Math.random()*30+30);
var rnb4 = Math.round(Math.random()*17);
alert(rnb4);

//round:round()四舍五入取整
//var num2 = 5.9999999;
//alert(Math.round(num));//6
//var num3 = 5.499999;
//alert(Math.round(num));//5

Array(数组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Array 对象
Array 对象用于在单个的变量中存储多个值。

Array 对象属性

constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
Array 对象方法

concat() 连接两个或更多的数组,并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串,并返回结果。
toLocaleString() 把数组转换为本地数组,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值

解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//数组方法

/* join:把数组拼接为字符串 将数组里面的逗号替换为join里面的参数,然后拼接为字符串栗子 */

//var str = "acbcdcecf";
//document.write(str + "<br />");
//var arr = str.split("c");//每个字符之间劈开
//document.write(arr + "<br />");
//str = arr.join("<span>p</span>");
//document.write(str + "<br />");

//数组增加删除方法
//var arr = [1, 2 , 3, 4, 5];
//arr[arr.length] = arr.length + 1;

//push 在数组后面添加内容
//arr.push(7);

//unshift 在数组前面添加内容
//arr.unshift(0);

//pop 删除最后一个 返回删除的内容
//arr.pop()

//把最后内容添加到前面
//arr.unshift(arr.pop());

//shift删除第一个 返回删除的内容
//arr.shift();

//把第一个内容添加到最后面
//arr.push(arr.shift());
//document.write(arr);

//数组合并方法
//var arr = [1,2,3,4,5];
//var arr2 = [6,7,8,9];
//var arr3 = [10,11,12];

/*concat 合并数组 在concat 里面加上要合并的数组 可以添加多个 用逗号隔开 原来数组不会有任何改变,合并的是返回值*/

//var newArr = arr.concat(arr2,arr3);
//document.write("newArr:"+newArr+"<br />");
//document.write("arr:"+arr+"<br />");
//document.write("arr2:"+arr2+"<br />");
//document.write("arr3:"+arr3+"<br />");

//截取
//var arr = [1,2,3,4,5,6];
//document.write(arr.slice(2,4));

//倒序 原来数组会改变为倒序
//var arr = [1,2,3,4,5,6,7,8,9];
//document.write(arr.reverse());
//document.write(arr);

//var arr = [6,8,5,2,9,1,7,4,3];
//arr.sort();//默认按顺序排列
//arr.sort(function (a ,b ){
// return b-a;
//});//a-b 正 b-a 负

//打乱数组顺序
/* arr.sort(function(){
return Math.random()-0.5;随机
})
document.write(arr);*/


/*splice(a,b,c) a:从哪里开始 b:往后删除多少个 c:添加内容后面可以添加多个,用逗号隔开*/

//var arr = ["a","b","c","d"];
//删除
//arr.splice(1,1);

//替换
//arr.splice(1,1,"新的");

//添加
//arr.splice(1,0,"新的");
//document.write(arr);

//转换
//Number():把数据类型转为数字
//String():把数据类型转为字符串

/*parseInt(a,b):把数据类型转为数字 从开始找字符串里的数字,直到不是数字就会停下来( 类似向上取整) a:是要转换的数据 b: 是要按什么进制进行转换 2进制 8进制 10进制 16进制 parseFloat:把数据类型转为浮点数(有小数点的数)*/

//alert(Number("123px123"));//NaN
//alert(parseInt("123px123",10));//123

栗子-输出随机的顺序

1
2
3
4
5
6
7
8
9
10
var arr =['韦*','李*','戚*','杨**','张**','徐**','赖**','代*','李**','孔**','李**','庞**','胡**','肖*','肖*','张**','唐*'];
for (var i=0; i < 10000 ; i++) {
arr.sort(function(){
//对数组的元素进行排序
return Math.random()-0.5;//获取一个随机数
});
}
for (var i=0; i < arr.length ; i++) {
document.write((i+1)+". " +arr[i] + "<br />")
}

输出随机的顺序函数代码

1
2
3
4
5
//随机打乱数组内容
function sortFn(arr){
arr.sort(function(){return Math.random()-0.5});
return arr;
}

获取范围内的随机数

1
2
3
4
5
6
7
8
/*myrandom(min,max) min到max范围的随机数*/

function myrandom(min,max){
var rnd = Math.round(Math.random()*(max-min)+min);
return rnd;
}
//调用
alert(myrandom(1,2));//1-2的随机数,包括1,2

基础知识二

Posted on 2016-08-23

H5基础 与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

2.CSS3样式属性

圆角

语法

例子

1
2
3
4
5
6
7
8
9
/*border-radius:[ length | percentage ]{1,4} ] / [ length | percentage ]{1,4} ] 默认值:0*/

.a{
width: 200px;
height: 100px;
/*border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;*/
border-radius: 100px/50px;/*以上简写*/
background:#8f0;
}/*——椭圆*/

简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a{
/*border-top-left-radius: 100px 30px;
border-top-right-radius: 60px 50px ;
border-bottom-left-radius: 80px 20px;
border-bottom-right-radius: 100px 50px ;*/

border-radius:100px 60px 100px 80px/30px 50px 50px 20px;/*以上简写*/
}

.b{
width: 0;
height: 0;
border: 50px solid black;
border-color: #0f8 transparent #8f0 #08f;
border-radius: 50px;
}

图像边框

1
2
3
4
5
6
7
8
9
10
11
12
<!--border-image-source : none | url(图像来源路径)默认值:none 
border-image-slice : [ number | percentage ]{1,4} && fill 默认值:100%
border-image-width : [ length | percentage | number | auto ]{1,4} 默认值:1 该属性用于指定边框宽度。
border-image-outset : [ length | number ]{1,4} 默认值:0 对边框背景图的扩展
border-image-repeat : [ stretch | repeat | round ]{1,2} 默认值:stretch 指定边框背景图的填充方式

涉及到的取值

stretch: 指定用拉伸方式来填充边框背景图。
repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
border-image:url() number% stretch;-->

阴影

文本阴影

语法

1
/*text-shadow:none | shadow [ , shadow ]*shadow = length{2,3} && color  ]默认值:none */

取值

1
2
3
4
5
none: 无阴影
第1个长度值:阴影水平偏移值。可为负值
第2个长度值:阴影垂直偏移值。可为负值
第3个长度值:可选,阴影模糊值。不允许负值
color: 设置对象的阴影的颜色。

盒阴影

语法

1
/*box-shadow:none | shadow [ , shadow ]*shadow = length{2,4} && color 默认值:none inset 内阴影*/

取值

1
第4个长度值:可选,阴影外延值。不允许负值

背景尺寸

1
2
3
4
5
6
7
8
/*
backgroun-size
length: 长度值指定
percentage: 百分比指定
auto: 真实大小
cover:等比缩放到完全覆盖容器,背景图像有可能超出容器
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
*/

基础知识

Posted on 2016-08-23

H5基础 与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

1.语义化更好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
新增标签

article定义文章
aside定义文章的侧边栏
figure一组媒体对象以及文字
figcaption定义 figure 的标题
footer定义页脚
header定义页眉
hgroup定义对网页标题的组合
nav定义导航
section定义文档中的区段
time定义日期和时间
mark定义需要突出显示或高亮显示的文本
progress显示js中耗费的函数的进程
details表示用户要求得到并可以得到的详细信息

3.表单功能增强

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
新增的input元素的类型

url:提交表单时检测input的value是否是一个url格式
email:一个电子邮件地址或电子邮件地址列表
date:年-月-日格式的控件
time:时:分格式的控件
datetime-local:同上,但没时区
month:年-月格式的控件
week:年-周数格式的控件
number:数字输入框
color:颜色选择框
range:选择区域



input新属性

placeholder:占位符,当输入框为空时显示的文字
required:该input是否为必填项
list:指定一个datalist,作为下拉提示单
pattern:指定一个正则表达式,用于检查输入是否符合正则
min/max:input的number能输入的最大/最小
step:针对input的number类型,每次递增step的值

5.响应式

响应式主要利用的是

1
2
3
CSS3——media query(媒体查询)
借助Javascript 判断屏幕的宽度和设备来进行调整
第三方的开源框架:bootstrap amazeui

流式布局

1
2
3
4
5
6
7
仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组css媒体查询突变到另一组,两者间没有任何平滑渐变。
将固定像素布局转换为灵活的百分比布局。
百分比计算公式:目标元素width/上下文元素width=百分比width

用em(rem)替换px(em用于字体,rem用于所有)
弹性图片,需要设置阀值
为不同屏幕尺寸提供不同图片

viewport 视口(改变分辨率)

1
2
3
4
5
6
7
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--
device-width——设备的宽度
initial-scale——初始大小
maximum-scale——最大缩放
user-scalable——用户操作 0为不能操作
-->

媒体查询

1
2
3
4
screen用于电脑屏幕,平板电脑,智能手机等。
max-width定义输出设备中的页面最大可见区域宽度。
max-height定义输出设备中的页面最大可见区域高度。
min-width定义输出设备中的页面最小可见区域宽度。

栗子

1
2
3
@media screen and (min-width: 320px) and (max-width: 640px){
/*屏幕最小320 最大640时所执行的样式*/
}

核心的属性

Orientation-设备方向

1
2
@media screen and (orientation:portrait){}/*-竖屏-*/
@media screen and (orientation:landscape){}/*-横屏-*/

CSS3

1.更多选择器类型

通用选择器

1
2
3
~ :  E~F{ }  匹配任何在E元素之后的同级F元素(从E元素往后找同级兄弟F元素)ie9以上
+ :E+F{ } 匹配在E元素之后第一个的同级F元素ie9以上
> : E>F{ } 匹配任何在E元素之后子级为F的元素ie8以上

属性选择器(优先级比类选择器高,比id选择器低)ie8以上

1
2
3
E[att^=“ val”] :属性att的值以“ val”开头元素
E[att$=“ val”] :属性att的值以“ val”结尾元素
E[att*=“ val”] :属性att的值任何位置包含“ val”元素

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
E: root  匹配E元素的根元素(html)

E:nth-child(n)匹配E元素的父级下排第n个E元素
E: nth-last-child(n)匹配E元素的父级下排倒数第n个E元素
E: last-child 匹配E元素的父级下排倒数第1个E元素

E:nth-of-type(n)匹配E元素的父级下第n个E元素
E:nth-last-of-type(n)匹配E元素的父级下第n个E元素
E:first-of-type 匹配E元素的父级下第n个E元素
E:last-of-type 匹配E元素的父级排第n个E元素

E:only-child 匹配E元素的父级下唯一的子级E元素
E:only-of-type 匹配E元素的父级下唯一E元素类型的子级E元素
E:empty 匹配空的E元素

E:not(s)反选,匹配不为s的E元素
E:target 选择当前活动的 E 元素(即被a锚点选中时)
input:enabled 选择每个启用的 <input> 元素
input:disabled 选择每个禁用的 <input> 元素
input:checked 选择每个被选中的 <input> 元素
E::selection 选择被用户选取的元素部分的字体样式、背景

分析

Posted on 2016-08-23

JS的切换案例分析

1
js什么的用文字说都太丧心病狂了,所以能用代码解决的事就不要揪着文字不放了!!!以下所有分析都在代码里,别说你看不见!!!

案例1 按钮点击切换div

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: cornflowerblue;
font-size: 50px;
text-align: center;
line-height: 100px;
display: none;
}
.show{
display: block;
}
.select{
background: darkorange;
}
</style>

<script type="text/javascript">
window.onload = function(){
//根据TagName获取四个按钮
var input = document.getElementsByTagName("input");
//根据TagName获取四个div
var div = document.getElementsByTagName("div");
//最简单的写法
//第1个按钮
input[0].onclick = function(){
//清空样式
for (var i=0; i<input.length;i++) {
input[i].className = "";
div[i].className ="";
}
this.className = "select";
div[0].className = "show";
}
//第2个按钮
input[1].onclick = function(){
//清空样式
for (var i=0; i<input.length;i++) {
input[i].className = "";
div[i].className ="";
}
this.className = "select";
div[1].className = "show";
}
//第3个按钮
input[2].onclick = function(){
//清空样式
for (var i=0; i<input.length;i++) {
input[i].className = "";
div[i].className ="";
}
this.className = "select";
div[2].className = "show";
}
//第4个按钮
input[3].onclick = function(){
//清空样式
for (var i=0; i<input.length;i++) {
input[i].className = "";
div[i].className ="";
}
this.className = "select";
div[3].className = "show";
}
//以上代码不一样的地方只有[]里的数字,所以可以采用for循环来简洁代码
//写法1
for(var i=0; i < input.length; i++){
//给input标志一个数字,用于告诉div,input是第几个
input[i].index = i;
input[i].onclick = function(){
//清空样式
for (var i=0; i<input.length;i++) {
input[i].className = "";
div[i].className ="";
}
this.className = "select";
div[this.index].className = "show";
}
}
//写法2
for(var i=0; i < input.length; i++){
input[i].onclick = function(){
for (var i=0; i<input.length;i++) {
if (this == input[i]) {
//判断this是哪个input
input[i].className = "select";
div[i].className = "show";
} else{
//清空样式
input[i].className = "";
div[i].className ="";
}
}
}
}
//写法3 减少计算器的运算
var before = 0;//用于记录当前选中的index值,并在下次点击事件变成上一个,然后清除它的样式,达到切换效果
for(var i=0; i < input.length; i++){
//给input标志一个数字,用于告诉div,input是第几个
input[i].index = i;
input[i].onclick = function(){
input[before].className = "";//清除上一个选中的index值
div[before].className = "";
this.className = "select";
div[this.index].className = "show";
before = this.index;//记录当前选中的index值
}
}
}
</script>

</head>
<body>
<input class="select" type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
<div class="show">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>

案例2 图片切换

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.warp{
width: 100%;
height: 100%;
position: relative;
}
.img{
width: 100%;
position: relative;
}
#show{
width: 400%;
position: relative;
transition: 1s;
}
#show img{
width: 12.5%;
position: relative;
}
.warp #next{
width: 0;
height: 0;
-webkit-box-sizing: border-box;
border: 8px solid cornflowerblue;
border-color: transparent transparent transparent cornflowerblue;
position: absolute;
top: 0;
right: 5%;
}
.warp #before{
width: 0;
height:0;
-webkit-box-sizing: border-box;
border: 8px solid cornflowerblue;
border-color: transparent cornflowerblue transparent transparent;
position: absolute;
top: 0;
right: 15%;
}

</style>

<script type="text/javascript">
window.onload =function (){
//根据ID获取上一张的按钮
var before = document.getElementById('before');
//根据ID获取下一张的按钮
var next = document.getElementById('next');
//根据ID获取图片的父级div
var s = document.getElementById('show');
//根据TagName获取图片的集合
var img = document.getElementsByTagName('img');
//定义一个节点,确定图片当前的位置
var index = 1;
//下一张按钮的点击事件
next.onclick = function (){
if(index < img.length){
//判断图片是否是最后一张
//图片不是最后一张时,执行
//定义num 计算left的数值,每张宽度是wrap的100%
var num = -1 * index;
//修改图片父级div的left值达到移动的效果(注:num算出来是一个数值不是百分比,所以要把num修改为百分比)
s.style.left = num*100 +"%";
//移动结束,记录当前图片位置
index ++;
}else{
//图片是最后一张时,执行
//让图片回到第一张
s.style.left = '0';
//初始当前图片位置
index = 1;
}
}
//上一张按钮的点击事件
before.onclick = function (){
if(index != 0){//判断图片是否是第一张
//图片不是第一张时,执行
//定义num 计算left的数值,每张宽度是wrap的100%
var num = -1 * index;
//修改图片父级div的left值达到移动的效果(注:num算出来是一个数值不是百分比,所以要把num修改为百分比)
s.style.left = num*100 +"%";
//移动结束,记录当前图片位置(注:位置需要的是上一张,所以是-1)
index --;
}else{
//图片是第一张时,执行
//让图片回到最后一张
s.style.left = '-300%';
//记录最后一张位置
index = img.length;
}
}
//每张图片的点击事件
for (var i = 0; i < img.length;i++) {
//遍历每张图片
img[i].onclick = function (){
//设置每张图片的点击事件
if(index < img.length){
//判断图片是否是最后一张
//图片不是最后一张时,执行
//定义num 计算left的数值,每张宽度是wrap的100%
var num = -1 * index;
//修改图片父级div的left值达到移动的效果(注:num算出来是一个数值不是百分比,所以要把num修改为百分比)
s.style.left = num*100 +"%";
//移动结束,记录当前图片位置
index ++;
}else{
//图片是最后一张时,执行
//让图片回到第一张
s.style.left = '0';
//初始当前图片位置
index = 1;
}
}
}
}
</script>

</head>
<body>
<div class="warp">
<div class="img">
<div id="show">
<img src="image/bytedanceHD.jpg" alt="" /><img src="image/huawei_redpoint.jpg" alt="" /><img src="image/toutiaohaoHD.jpg" alt="" /><img src="image/UCexplorer.jpg" alt="" />
</div>
</div>
<div id="before"></div>
<div id="next"></div>
</div>
</body>
</html>

案例3 鼠标经过时切换

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
position: relative;
}
.clear:after{
content: '';
display: block;
clear: both;
zoom: 1;
}
.fl{
float: left;
}
.fr{
float: right;
}
.wrap{
width: 400px;
height: 400px;
border: 1px solid mediumaquamarine;
position: absolute;
left: 0;
right: 0;
margin: 100px auto;
box-shadow: 1px 1px 3px aquamarine;
border-radius: 3px;
}
#left{
width: 150px;
height: 100%;
}
#left div{
width: 100%;
height: 24.8%;
line-height: 100px;
text-align: center;
border-bottom: 1px solid cadetblue;
background: rgba(0,255,255,0.05);

}
#left div:nth-child(4){
border: 0;
}
#scroll{
width: 20px;
height: 20px;
background: url(img/arr.png);
background-size: 100% 100%;
position: absolute;
top: 0px;
left: 131px;
z-index: 3;
transition: 0.6s;
}
#right{
width: 249px;
height: 100%;
border-left: 1px solid #eee;
z-index: 3;
background: white;
box-shadow: -1px 0px 3px #ccc;
}
#right div{
display: none;
}
#right div img{
width: 100%;
}
#left .select{
background: rgba(0,251,255,0.2);
}
</style>

<script type="text/javascript">
window.onload = function (){
//1.获取左边四个邮箱类型
//2.获取三角形
//3.获取右边四块邮箱内容
//4.设置四个邮箱类型的鼠标经过事件
//5.经过时改变三角形位置
//6.显示右边对应的邮箱内容

var left = document.getElementById('left');
var scroll = document.getElementById('scroll');//三角形
var right = document.getElementById('right');
var div = left.getElementsByTagName('div');
//左边四个邮箱类型
var div2 = right.getElementsByTagName('div');
//右边四块邮箱内容
//offsetHeight 获取标签的高度 offsetWidth 获取标签的宽度
//左边单个邮箱类型的高度减三角形的高度,除以2 获得左边单个邮箱类型的垂直中间位置
var _middle = (div[0].offsetHeight -scroll.offsetHeight)/2;
//设置三角形的初始位置为左边单个邮箱类型的垂直中间位置
scroll.style.top = _middle+"px";

//遍历设置左边的所有项的鼠标经过事件
for (var i=0; i < div.length ; i++) {
div[i].index = i ;//定义左边单个邮箱类型的节点,告诉它,它自己的位置,以控制右边对应的邮箱内容显示
div[i].onmouseenter = function(){
//鼠标经过事件
var sum = _middle + (100*this.index);//计算该邮箱类型的垂直中间位置
scroll.style.top = sum+'px';
//改变三角形位置
for (var j=0; j < div.length ; j++) {//清除所有邮箱类型以及右边对应的邮箱内容的样式
div[j].className = "";
div2[j].style.display = "none";
}
//设置当前选中邮箱类型以及右边对应的邮箱内容的样式
this.className = 'select';
div2[this.index].style.display = "block";
}
}
}
</script>

</head>
<body>
<div class="wrap clear">
<div id="left" class="fl">
<div class="select">163</div>
<div>126</div>
<div>qq</div>
<div>google</div>
</div>
<div id="scroll"></div>
<div id="right" class="fr">
<div style="display: block;"><img src="../image/toutiaohaoHD.jpg"/></div>
<div ><img src="../image/huawei_redpoint.jpg"/></div>
<div ><img src="../image/UCexplorer.jpg"/></div>
<div ><img src="../image/bytedanceHD.jpg"/></div>
</div>
</div>
</body>
</html>

小贴士偷偷告诉你

1
2
3
4
5
6
function
function:函数,一个方法,需要一个对象去调用
this:函数里的一个对象
给函数名加上()可以执行
默认调用的函数是window
谁调用函数,this就是谁

基础知识三

Posted on 2016-08-23

H5基础 与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

3.CSS3进阶属性
CSS3渐变(linear-gradient(线性渐变)、radial-gradient(径向渐变))

线性渐变

1
2
3
4
5
6
7
a{
background: linear-gradient(30deg,#f80 0,#0f8 40%,#8f0 70%,#0ff);
}
.b{
/*——rgba()IE9以上兼容,设置颜色和透明度*/
background: linear-gradient(30deg,rgba(255,0,0,0),rgba(255,0,0,1));
}

径向渐变

1
2
3
4
.a{
/*33%为中心点位置50px为扩散范围*/
background: -webkit-radial-gradient(33% 33%,50px 50px,#f80 0,#0f8 30%,#8f0 60%,#0ff);
}

练习-使用渐变画出一个球体和渐变的圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
float: left;
margin-right: 30px;
}
div:nth-child(1){
width: 200px;
height: 200px;
background: -webkit-radial-gradient(30% 30%,100% 100%,#fff,#666,#000);
border-radius: 50%;
box-shadow: 3px 3px 10px #666;
}
div:nth-child(2){
margin-top: 50px;
width: 300px;
height: 100px;
background: linear-gradient(#000 0,#fff 30%,#000);
border-radius: 20px;
box-shadow: 3px 3px 10px #666;
}
</style>

</head>
<body>
<div></div>
<div></div>
</body>
</html>

蒙版

这里的蒙版与Ps的效果相反,不熟悉的可以先去玩Ps的,不过最后记得把思路转过来!!以下栗子接好

1
2
3
4
5
6
7
{
-webkit-mask-image: url(mark01.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-clip: content;
-webkit-mask-origin: padding;
}

属性

1
2
3
4
5
蒙版图片:-webkit-mask-image: url()/gradient);
蒙版重复:-webkit-mask-repeat: no-repeat repeat-x repeat-y;
蒙版定位:-webkit-mask-position
蒙版-webkit-mask-clip: content border padding;
-webkit-mask-origin: content border padding;

CSS3倒影(reflect)

1
2
3
4
.a{
width: 450px;
-webkit-box-reflect:right 10px linear-gradient(to right,transparent,black);
}

CSS3过渡(transition)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.transition{
width: 100px;
height: 100px;
background: red;
float: none;
clear: both;
/*-webkit-transition: width 1s,height 1s 1s , background 1s 2s;
transition: width 1s,height 1s 1s , background 1s 2s;*/

-webkit-transition-delay: 1s;
-webkit-transition-timing-function: cubic-bezier(.6,-0.33,.1,1.58);
-webkit-transition-duration: 3s;
}
.transition:hover{
width: 500px;
height: 500px;
background: blue;
}

/*透明字体1: 利用背景裁剪,在类里面写文字,文字颜色设为透明*/
.bg_transition{
width: 600px;
height: 100px;
font-size: 100px;
color: transparent;
background: linear-gradient(90deg,#f80,#f08,#8f0,#8f0,#08f,#0f8);
background-position: 0 0;
-webkit-background-clip: text;
transition: background-position 5s;
}
.bg_transition:hover{
background-position: 1200px 200px;
}

/*透明字体2 : 利用蒙版*/
div{
width: 150px;
height: 100px;
background: linear-gradient(50deg,red,blue,orange,pink,yellow,green,gray);
-webkit-mask-image:url(img/14.png);/*文字图片,文字部分要有颜色,文字以外部分为透明*/
transition: 1s;
}
div:hover{
background-position: -100px 0;
}

CSS3 3-2D-3D变形(transform)

1
2
3
4
5
6
7
transform:scale() ;缩放X Y
transform:translate() ;位移X Y
transform:rotate() ;旋转 X Y
transform:skew() ;倾斜X Y
transform-origin:;设置中心点
-webkit-perspective:500; 景深
-webkit-transform-style: preserve-3d; 转为3D

栗子

scale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 250px;
height: 250px;
border: 5px solid black;
margin: 50px auto;
overflow: hidden;
transform: scaleX(2) scaleY(1.2);
}
img{
transition: 0.5s;
}
div:hover img{
transform: scale(1.2);
}
p{background: red;}
</style>

</head>
<body>
<div>
<img src="img/1.jpg" alt="">
</div>
<p>我是P</p>
</body>
</html>

translate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
margin: auto;
position: relative;
left: 100px;
}
p{
width: 200px;
height: 200px;
margin: auto;
/*translateX translateY translateZ*/
transform: translate(100px,100px);
background: blue;
}
</style>

</head>
<body>
<div></div>
<p></p>
<span>我是SPAN</span>
</body>
</html>

rotate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding-top: 100px;
}
div{
width: 200px;
height: 200px;
background: red;
margin-left: 200px;
margin-bottom: 10px;
}
.d1{
transition:1s;
transform: rotate(0deg) translate(0px);
}
.d1:hover{
transform: rotate(50deg) translate(300px);
}
.d2{
transition: 1s;
transform: translate(0px) rotate(0deg);
}
.d2:hover{
transform:translate(300px) rotate(50deg);
}
</style>

</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
</body>
</html>

skew

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
transform: skewX(0deg);
}
</style>

</head>
<body>
<div></div>
</body>
</html>

3d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
/*视角:距离观看的内容1000px*/
-webkit-perspective:1000;
/*转换为3D模式*/
transform-style: preserve-3d;
}
div{
transform-style: preserve-3d;
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transform: rotateX(0deg) translateZ(101px);/*修改数值可以看到3d的旋转效果*/
}
</style>

</head>
<body>
<div></div>
</body>
</html>

练习-做一个立方体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
background: black;
-webkit-perspective:1000;
-webkit-perspective-origin:50% 125px;
}
.wrap{
width: 200px;
height: 200px;
border: 5px solid black;
position: relative;
margin:50px auto;
transform-style: preserve-3d;
transition: 3s;
}
.wrap:hover{
transform: rotateY(360deg) rotateX(360deg);
}
.wrap div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
font-size: 50px;
text-align: center;
line-height: 200px;
color: white;
opacity: 0.8;
}

.d1{
background: red;
transform: rotateX(90deg) translateZ(100px);
}
.d2{
background: yellow;
transform: rotateX(90deg) translateZ(-100px);
}
.d3{
background: blue;
transform: rotateY(90deg) translateZ(-100px);
}
.d4{
background: green;
transform: rotateY(90deg) translateZ(100px);
}
.d5{
background: orange;
transform: translateZ(-100px);
}
.d6{
background: pink;
transform: translateZ(100px);
}
</style>

</head>
<body>
<div class="wrap">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
</body>
</html>

过渡

1
2
3
4
5
6
7
8
9
10
11
12
贝塞尔曲线:cubic-bezier.com/#.17,.67,.83,.67

transition:property(属性) duration(执行时间) timing-function(过渡曲线) delay(延时);

timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

inear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

小贴士

1
2
3
4
5
浏览器内核(标准样式不用加内核前缀)
-webkit- 谷歌和苹果
-moz- 火狐
-o- 欧朋
-ms- IE

动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
animation:property(属性) duration(执行时间)  timing-function(过渡曲线) delay(延时)    iteration-count(循环次数) direction(翻转动画轨迹) play-state(动画暂停) fill-mode(动画前后位置) steps(number)(分成number帧)

关键帧:
@-webkit-Keyframes ‘name’{
from{属性:value;}
percentage{属性:value;}
to{属性:value;}
}

关键帧语法
@KEYFRAMES写法
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}

keyframes样例

1
2
3
4
5
6
@-webkit-keyframes 'wobble' {
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}

animation属性

1
2
3
4
5
6
7
8
9
-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (<number> , <number>, <number>, <number>)贝塞尔曲线
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环次数,infinite为无限次*/
-webkit-animation-direction: alternate;/*定义是不翻转动画轨迹*/
-webkit-animation-play-state:paused;/*定义动画的暂停*/
-webkit-animation-fill-mode:none | forwards | backwards | both;/*动画后位置*/

传说的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
.wrap div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
/*transition: 1s;*/
animation: move 2s cubic-bezier(.76,-0.7,.35,1.46) 0s;
animation-iteration-count: 2;
animation-direction: alternate;

}
.wrap:hover div{
/*left: 300px;*/
animation-play-state: paused;
/*animation-play-state: running;*/
}
@keyframes move{
0%{
left: 0;top:0;
}
25%{
left:300px;top: 0px;
}
50%{
left:300px;top: 300px;
}
75%{
left:0px;top: 300px;
}
100%{
left: 0px;top: 0;
}
}
</style>

</head>
<body>
<div class="wrap">
<div></div>
</div>
</body>
</html>

帧动画的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 32px;
height: 35px;
background: url(steps.png);
animation:move 1s steps(3) infinite;/*分成3帧,每帧移动105px的距离*/
}

@keyframes move{
from{
background-position: 0 0px;
}
to{
background-position: 0 -105px;
}
}
</style>

</head>
<body>
<div></div>
</body>
</html>

引用字体包

1
2
3
font-spider.org/     字蛛,中文字体压缩器

安装字蛛 npm install font-spider -g(Mac系统需要加权限 sudo npm install font-spider -g ,需要电脑密码)
1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}

终端压缩 到达文件路径后进行压缩 font-spider ./demo/*.html

图标字体库

1
fontawesome.dashgame.com/

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
<title></title>
<style type="text/css">
div:before{
font-size: 120px;
}
</style>

</head>
<body>
<div class="fa fa-bell fa-5x"></div><br />
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
<i class="fa fa-spinner fa-spin"></i> <!--旋转图标-->
</body>
</html>

小贴士

显示Mac系统文件夹目录(终端输入)

defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder

CSS3 分栏(适用于:报纸类、文字类)

栏数控制 column-count

栏间距 column-gap

栏宽度 column-width

是否跨栏显示 column-span all/none

1
2
3
4
5
6
语法:columns

column-width:数值 每栏宽度
column-span:all/none 跨栏显示
column-gap :normal/数值 每栏间距
column-count:数字 分栏数目

栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
/*-webkit-column-width: 200px;*//*每栏宽度*/
-webkit-column-count: 3;/*分栏数量 如果存在column-width并且宽度不足时,不会分成3栏*/
-webkit-column-gap: 50px;/*每栏间距 会影响分栏数目*/
/*分栏的分割线*/
-webkit-column-rule-color: black;/*颜色*/
-webkit-column-rule-width: 5px;/*宽度*/
-webkit-column-rule-style: solid;/*样式*/
/*-webkit-column-rule: 5px solid black;*/
}
h2{
-webkit-column-span: all;
text-align: center;
}
</style>

</head>
<body>
<div class="wrap">
<h2>1213456</h2>
<p>dsdsfdsfdsfcd双方的师傅的说法是非常cfdsfdsfdsf所否是宣传宣传否是宣传宣传得税法是否是宣传宣否是宣传宣传否是宣传宣传传v</p>
<p>否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣否是宣传宣传否是宣传宣传传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传</p>
</div>
</body>
</html>

CSS3 自适应布局

1
2
3
4
5
6
7
8
flew-box:弹性布局(IE9以上,手机端部分浏览器有bug)
display:box;转变属性
box-orient 子元素排列方式(水平垂直,默认水平排列每个子元素占据一列)
box-direction 排列顺序
box-flex子元素分配空间(类似分蛋糕,计算同级的蛋糕数量,用剩余宽度除以数量再分配)给子元素设置)
box-ordinal-group 子元素的显示顺序(给子元素设置)
box-anlign 子元素的垂直对齐方式
box-pack 子元素的水平对齐方式

来颗栗子压压惊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height: 100%;/*要做全屏时,需要给html和body的height:100%;*/
display: -webkit-box;
-webkit-box-orient: vertical;
}
.header{
display: -webkit-box;
/*-webkit-box-orient: vertical;*//*默认为水平排列*/
height: 50px;/*子元素与父级一样高,水平排列为100%高度,垂直排列为100%宽度*/

}
.header .logo{
background-color: purple;
/*-webkit-box-flex: 1;*//*不设置时为固定宽度*/
}
.header .nav{
background-color: orange;
/*width: 100%;*//*宽度为100%时和父级是一样高度 会超出,这里不用百分比*/
-webkit-box-flex: 1;
}
.content{
display: -webkit-box;
-webkit-box-flex: 1;
}
.content .con1{
background-color: pink;
-webkit-box-flex: 3;
}
.content .con2{
background-color: royalblue;
-webkit-box-flex: 3;
}
.content .con3{
background-color: lightblue;
-webkit-box-flex: 1;
}
.footer{
background-color: yellowgreen;
height: 50px;
}
</style>

</head>
<body>
<div class="header">
<div class="logo">上左,宽高固定</div>
<div class="nav">上右,高度固定,宽度自适应</div>
</div>
<div class="content">
<div class="con1">中1</div>
<div class="con2">中2</div>
<div class="con3">中3</div>
</div>
<div class="footer">底</div>
</body>
</html>

小栗子

1
2
3
4
5
6
7
8
9
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>

排列顺序

1
2
3
4
.wrap{
display:-webkit-box;
-webkit-box-direction: reverse;/*倒序排列 5 4 3 2 1*/
}

显示顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap div:nth-child(1){
-webkit-box-ordinal-group: 3;
}
.wrap div:nth-child(2){
-webkit-box-ordinal-group: 4;
}
.wrap div:nth-child(3){
-webkit-box-ordinal-group: 2;
}
.wrap div:nth-child(4){
-webkit-box-ordinal-group: 5;
}
.wrap div:nth-child(5){
-webkit-box-ordinal-group: 1;
}

对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
width: 600px;
height: 600px;
border: 5px solid darkcyan;
display: -webkit-box;
-webkit-box-align: center;/*垂直居中 在vertical中显示为水平居中 start(默认) end*/
-webkit-box-pack: center;/*水平居中 在vertical中显示为垂直居中 start end justify(两端对齐,只有水平才有)*/
}
.wrap div{
width: 100px;
height: 100px;
background: brown;
}
123
Dai  Li

Dai Li

28 posts
© 2016 Dai Li
Powered by Hexo
Theme - NexT.Muse