您的位置:首页 > Web前端 > CSS

css/js(工作中遇到的问题)-3

2015-11-24 20:28 507 查看

设置宽高比

使用
padding/margin-top/bottom
;

设置出教准确的自适应布局;

用于预加载图片;

关于数据库设置

添加
extra
对象用于扩展;

添加
type
类型;

对于字体

使用百分比继承父类

使用
media
进行适应

@media (max-width: 600px) {
html {
font-size: @w * 26px;

}
}
@media (max-width: 414px) {
html {
font-size: @w * 18px;

}
}
@media (max-width: 375px) {
html {
font-size: @w * 16px;
}
}
@media (max-width: 320px) {
html {
font-size: @w * 14px;
}
}

暂时的路径跳转使用302

设置302后浏览器会记录,除非设置
cache
否则会永久跳转;

判断滚动到页面底部

if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log('test');
}

对于插入节点

appendChild
只能插入
Node
类型;

使用
insertAdjacentHTML
插入字符串类型;

打印五星制

function getRating(rating) {
if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
}

最简单的居中方式

垂直: 字元素 例子

{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


水平: 父元素

{
text-align: center;
}
//
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

获取函数的参数名称

function getArgs(func) {
var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];

return args.split(",").map(function(arg) {
return arg.replace(/\/\*.*\*\//, "").trim();
}).filter(function(arg) {
// 确保没有undefineds
return arg;
});
}
undefined

.gitigonre
文件

*.csv
*.dat
*.iml
*.log
*.out
*.pid
*.seed
*.sublime-*
*.swo
*.swp
*.tgz
*.xml
.DS_Store
.idea
.project
node_modules
npm-debug.log

直接用js修改样式

div.style.setAttribute('style','height:100px');

毛玻璃效果

注意添加的对象:
filter: blur(xpx);


new Date的陷阱

在ES5之中,如果日期采用连词线(-)格式分隔,且具有前导0,
JavaScript
会认为这是一个
ISO
格式的日期字符串,导致返回的时间是以
UTC
时区计算的。

启动
nodejs
程序注意

一些变量设置都要放在
start
前面

NODE_ENV=production npm start;

时间格式处理

ISO 8601 格式:
yyyy-mm-ddThh:mm:ss[.mmm]
;

T 表示后面是日期时间值的时间部分;

格林尼治标准时间
GMT
;

世界标准时间
UTC
:
yyyy-mm-dd|yyyy-mm-ddThh:mm:ssTZD


new Date('2015-12-12T00:00:00+0800');
new Date('2015-12-12T00:00:00+0800').toUTCString();    //UTC格式的格林尼治标准时间
new Date('2015-12-12T00:00:00+0800').toISOString();     //ISO格式的格林尼治标准时间

表单上传的注意

let formData = new FormData(document.forms[0]);

//设置disable=false的input类型不会被添加到formData中

同时使用渐变和背景图片

注意退化处理

body {
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), linear-gradient(#eb01a5, #d13531); /* W3C */
background-color: #eb01a5;
}

简单地设置字体自适应

function resize () {document.body.style.fontSize = document.body.clientWidth * 0.04 + "px"};
resize(); window.onresize = resize;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: