使用rem来做页面适配

思路

因为rem单位的特殊性,其是根据根元素<html>的字体大小来作为单位的,所以只需修改根元素的字体大小即可改变整个页面大小甚至是布局。

根据 mediaquery来设置

通过css mediaquery 来限定不同屏幕宽度而设置根元素的字体大小来实现适配。

使用javascript判断

js获得浏览器宽高、屏幕宽高

高度有关

1
2
3
4
5
6
7
8
9
10
11
12
13
//浏览器窗口高度
window.outerHeight
//浏览器可视区域高(包括滚动条)
window.innerHeight
//ps:在部分版本QQ浏览器上innerHeight和outerHeight值相同
//浏览器可视区域高(不包括滚动条)
document.documentElement.clientHeight
//网页总高度
document.body.clientHeight
//显示器可视高度
window.screen.height
//显示器可用高度(例如去除底部任务栏)
window.screen.availHeight

宽度有关

1
2
3
4
5
6
7
8
9
10
11
12
//浏览器窗口宽度
window.outerWidth
//浏览器可视区域宽度(包括滚动条)
window.innerWidth
//浏览器可视区域宽度(不包括滚动条)
document.documentElement.clientWidth
//网页总宽度
document.body.clientWidth
//显示器可视宽度
window.screen.width
//显示器可用宽度(例如去除侧边任务栏)
window.screen.availWidth

图片高度示意

CSS3 3D立方体

演示

新窗口打开

思路

首先需要给这个正方体的父容器设置 transform-style 属性为 preserve-3d 这样才能保证子元素是在一个三位空间内,再给父元素的 position 设置为 relative,然后给子元素正方体这6个面改变角度和位置使其在正确的位置并更改其 positonabsolute 相对于父元素定位。
改变角度和位置都使用 transform 属性,之后在三维坐标系通过 rotate3d() 改变角度,通过 translate3d() 改变位置。就ok了。
tips 微信目前无法展示此效果,请选择使用浏览器打开。

代码

html

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="box">
<div id="front">front</div>
<div id="back">back</div>
<div id="top">top</div>
<div id="bottom">bottom</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>

CSS

用vue简单实现知乎日报

前言

使用版本vue1.x。
想用vue构建知乎日报原因很简单,作为一个vue小白很需要亲手做个项目来提升提及以及更加深入了解vue,也希望这个小项目能给刚学习vue的同学一点启发。

准备工作

首先要找到知乎日报的api,这里感谢 @izzyleung 总结的知乎日报api以及说明 因为原来的api不支持跨域嘛,需要自己代理这些api并允许跨域,这里我只代理了8个接口,接口以及参见本项目github的readme。之后再用nginx来反向代理接口。

开发过程

项目参考了vue官方提供的参考项目,使用了 vue-routervue-resource 这两个插件,并且使用了vue-cli 这个脚手架工具来搭建webpack项目。之后就可以正式开发了,UI我大致模仿了知乎日报安卓客户端的UI但是没有实现其全部功能,以后会慢慢完善。对于vue的核心,组件部分,我这里写了6个组件,分别是导航栏组件、侧边栏组件、主页组件、轮播组件、主题列表组件、文章组件,考虑到要模仿客户端UI,这里组件样式全是用sass/css写的。我这里偷懒,响应式布局只写了最外面的container在屏幕宽度大于640px时候宽度调整为640px并且水平居中,所以建议在手机或F12手机模式下浏览demo,另外由于采用了flex布局,请使用现代浏览器。之后就是规划路由啦,然后做做简单的CSS3动画效果,demo就完工了,之后把demo上传到我1M带宽的小水管服务器上,静态文件挂在七牛云上,解决。

Tips:使用sublime的同学可以下载vue syntax highlight 这个插件来语法高亮.vue文件,但是,当你把 <style>加上lang="sass "时,emmet语法会失效,我的解决方式是sublime右下角暂时更改语法模式为html,另外格式化.vue代码用HTML-CSS-JS Prettify插件并在其配置文件中加上vue即可)。

图片防盗链

当我遇到知乎日报图片防盗链时候我是拒绝的,因为一直提示403,我不能确定是webpack-dev-server出问题还是nginx出问题或者是知乎封了我等等,后来发现如果我挂上ss,或者直接本地打开项目文件,图片是能正常打开的,然后我就意识到是防盗链问题,我的解决方式是用node来转发这些图片并更改请求referer头为www.zhihu.com然后问题就解决了,这里有个**花絮**:开始我把node http.Request 里面url对象的pathname写成了pathnnme然而我还没有发现导致返回的图片一直是本图片仅限在知乎内使用balabala的,我以为是服务器ip被封都放弃了,在上次检查时发现了这个bug然后图片就能正常显示了。

作业上传+学生互评打分系统

安装

1
npm install

数据结构JavaScript描述——列表(一)

列表

定义

列表是一组有序的数据。每个列表中的数据称为 元素 。在JavaScript中,列表中的元素可以使任何数据类型,同时没有显示能保存多少元素

列表抽象数据类型定义

属性和方法

  • listSize 列表的元素个数
  • pos 列表的当前元素
  • length() 返回列表元素个数
  • clear() 清空列表所有元素
  • toString() 返回列表字符串形式
  • getElement()返回当前位置元素
  • insert() 在现有元素后插入新元素
  • append() 在列表末尾添加新元素
  • remove()从列表中删除元素
  • front()将列表的当前位置移动到第一个元素
  • end() 将列表当前位置移动到最后一个元素
  • prev()将当前位置后移一位
  • next()将当前元素前移一位
  • currPos()返回列表的当前位置
  • moveTo()将当前位置移动到指定位置

实现列表类

JavaScript Ajax封装 类似jQuery Ajax

_Ajax

简介

简单封装的ajax库
支持post和get方法 兼容IE7及以上浏览器
和jQuery Ajax格式相似

源码

源码

更新

已更新jsonp跨域支持

api

option

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_Ajax({
"url":"",
"method":"",//默认get
"async":true,//默认为false
"data":{
},
"header":{
},
"cache":true,//默认为false
"dataType":"",//"text" "json" "xml" "jsonp"默认为text
success:function(){
},
beforeSend:function(){
}
})

libs:

通过 <script>标签引入<script src="lib/_Ajax.min.js" type="text/javascript" charset="utf-8"></script>
通过CDN获取http://ajax-10030624.file.myqcloud.com/_Ajax.js http://ajax-10030624.file.myqcloud.com/_Ajax.min.js

example

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>_Ajax_Demo</title>
<script src= " lib/_Ajax.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
_Ajax({
"url":"server.php",
"method":"post",//默认get
"async":true,//默认为false
"data":{
"key":"value",
"key2":"value2"
},
"header":{
"h":"c",
"h2":"c2"
},
"cache":true,//默认为false
"dataType":"json",//"text" "json" "xml" 默认为text
success:function(data){
},
beforeSend:function(){
}
})
</script>
</body>
</html>
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×