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;
相关文章推荐
- css杂记
- js获取指定节点对象的样式属性的值的封装函数(兼容ie、Opera和符合w3c标准浏览器)
- js获取指定节点对象的样式属性的值的封装函数(兼容ie、Opera和符合w3c标准浏览器)
- css3 background-size属性--ie兼容
- DIV+CSS实操五:经管系网页内容模块内容添加(二)
- DOM-元素节点内联样式
- Onboard,迷人的引导页样式制作库
- Onboard,迷人的引导页样式制作库
- css媒体查询判断横屏、竖屏
- css动画效果transtion,transform,animation
- 详解CSS3选择器的使用方法汇总
- CSS - DIV标签width根据内容自适应
- css规范
- 使用CSS为内容设定特定的鼠标样式(cursor)介绍
- 深入浅析css3 border-image边框图像详解
- 南大软院大神养成计划——CSS进阶
- CSS优先级详解
- sublimeText3中 less2css error: `lessc` is not available的解决办法
- 修改checkbox的样式
- CSS(3)