设置宽高比

  • 使用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;

css/js(工作中遇到的问题)-3的更多相关文章

  1. css/js(工作中遇到的问题)-4

    JS生成随机的由字母数字组合的字符串 Math.random().toString(36).substr(2)

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

    iOS6 中的 apple-itunes-app tag 例子 //iOS6, safari才有效 <meta name="apple-itunes-app" content ...

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

    页面resize方法 if(document.createEvent) { const event = document.createEvent ("HTMLEvents"); e ...

  4. css/js(工作中遇到的问题)-5

    后端换行符处理 问题描述 // Windows new line support (CR+LF, \r\n) str = str.replace(/\r\n/g, "\n"); 遍 ...

  5. css/js(工作中遇到的问题)

    移动设备点击时去掉外加的蓝色边框 a, input, button { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highligh ...

  6. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  7. js工作中编程习惯

    在前端编程中总结的习惯不管js还是css 还是后端开发这几点都是必须要做到的做好这几点不管去什么公司都是受到别人的尊重 善用变量,尤其是对DOM结构中的ID以及CLASS 多写注释,自己不熟,前面写后 ...

  8. js工作中日常问题集中

    1.判断问题 如果type存在就设置type的值为type,否则设置type为0: 原始的写法,使用 if else:if(type){type = type} 使用三元操作符:type : type ...

  9. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

随机推荐

  1. linux 卸载软件

    sudo apt-get autoremove --purge 后跟要卸载的软件名称, --purge表示要完全卸载.

  2. Android Multimedia框架总结(二)MediaPlayer框架及播放网络视频案例

    前言:前面一篇我们介绍MediaPlayer相关方法,有人说,没有实际例子,看得不是很明白,今天在分析MediaPlayer时,顺带一个播放网络视频例子.可以自行试试.今天分析的都是下几篇介绍各个模块 ...

  3. HTML表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. UISearchController Attempting to load the view of a view controller while it is deallocating is not allowed and may result in undefined behavior

    Attempting to load the view of a view controller while it is deallocating is not allowed and may res ...

  5. 解决安卓TextView异常换行,参差不齐等问题

    参考:http://blog.csdn.net/u012286242/article/details/28429267?utm_source=tuicool&utm_medium=referr ...

  6. 51nod1057(python2计算n!)

    题目链接:www.51nod.com/onlineJudge/questionCode.html#!problemId=1057 思路:直接for循环呗- 代码: n = int( raw_input ...

  7. window 环境安装MongoDB

    强制安装mongodb服务 命令 sc create MongoDB binPath= "D:\MongoDB\Server\3.2\bin\mongod.exe --service --d ...

  8. Ionic环境搭建

    stepts npm install -g ionic@beta Make sure you have NodeJS installed. Download the installer here or ...

  9. spring刚开始学习搭建

    下载的软件包地址: http://repo.springsource.org/libs-release-local/org/springframework/spring 用maven进行快速开始: h ...

  10. Android -- java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack trace available

    使用Bundle 的getParcelableArray 出现了以下错误: Class not found when unmarshallingjava.lang.ClassNotFoundExcep ...