随笔档案「2017年10月」 - 幽幽冷瞳

Flex弹性盒模型

摘要：说到H5,说到响应式,老牛第一时间想到的第一个rem,第二个就是flex盒模型,这两个属性简直是移动端响应式开发利器..用到了flex弹性盒模型意味着抛弃了老旧的float甚至是margin的布局进入了完全的响应式布局的时代,听过有个比喻,有的人不愿意尝试新鲜事物,就好像不愿意尝试网上支付的老年人一阅读全文

posted @ 2017-10-31 20:00 幽幽冷瞳阅读(291) 评论(1) 推荐(1)

响应式布局rem的使用

摘要：在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算！ 1.rem的兼容性：如下图所示IE9以上就支持了rem这个属性,你说IE6 7 8怎么办,怎么办?让IE去死呗,都H5了还兼容个蛋蛋.手机端就更不用说IE了2.r 阅读全文

posted @ 2017-10-31 19:45 幽幽冷瞳阅读(1056) 评论(0) 推荐(0)

京东首页如何实现pc端和移动端加载不同的html的？

摘要：进入www.jd.com后代码判断是手机的话就跳转m.jd.com 京东源码： !function(n){function o(n){for(var o=n+"=",t=document.cookie.split(";"),e=0;e<t.length;e++){for(vari=t[e];" "= 阅读全文

posted @ 2017-10-31 11:42 幽幽冷瞳阅读(1252) 评论(0) 推荐(0)

canvas绘制表盘时钟

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas绘制表盘</title></head><body> <canvas id='box' width="500" height="500" > 您的浏览器不阅读全文

posted @ 2017-10-19 23:18 幽幽冷瞳阅读(460) 评论(0) 推荐(0)

javascript实现ul中列表项随机排列

摘要：方法1 <!DOCTYPE html><html lang="en"><head> <script type="text/javascript"> window.onload=function(){ var arr = new Array(1,2,3,4,5,6); var ul = documen 阅读全文

posted @ 2017-10-17 15:15 幽幽冷瞳阅读(747) 评论(0) 推荐(0)

使用 HTML5 视频事件

摘要：转自：http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx 为什么要使用事件？ HTML5 视频对象提供了很多事件，这些事件可以帮助简化和增强网页的内容。在此处将看到使用事件检查内容是否可用、视频播放状态以及如何在视频中监视当阅读全文

posted @ 2017-10-15 20:56 幽幽冷瞳阅读(348) 评论(0) 推荐(0)

Javascript获取当前鼠标在元素内的坐标定位

摘要：代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>获取鼠标在Canvas中的坐标位置</title> <style> #canvas{ border:1px solid #ccc; width:300px; heigh 阅读全文

posted @ 2017-10-13 22:18 幽幽冷瞳阅读(6852) 评论(0) 推荐(0)

移动 web 开发问题和优化小结

摘要：1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，阅读全文

posted @ 2017-10-10 09:03 幽幽冷瞳阅读(196) 评论(0) 推荐(0)

前端综合知识小集

摘要：一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。 1.使用flex //html <div class='box'> <div cla 阅读全文

posted @ 2017-10-09 12:41 幽幽冷瞳阅读(195) 评论(0) 推荐(0)

AS3.0判断数组中最大值

摘要：function getMax(Arr) { if (typeof Arr !="object") { return null; } for (var i=0,max=Arr[i]; i<Arr.length; ++i) { if (Number(Arr[i])>max) { max=Arr[i]; 阅读全文

posted @ 2017-10-08 21:18 幽幽冷瞳阅读(335) 评论(0) 推荐(0)

JavaScript 的一些SAO操作

摘要：IE判断检测 jQuery 在 1.9 版本之前，提供了一个浏览器对象检测的属性 .browser 的替代方案。于是各种利用 IE bug 的检测方法被搜了出来： // IE 678 最短方法 var ie = !-[1,]; 解析 : 在标准浏览器下 false IE 6 7 8 下: true 阅读全文

posted @ 2017-10-08 20:53 幽幽冷瞳阅读(285) 评论(0) 推荐(0)

javascript中call与this的初见

摘要：call定义语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指阅读全文

posted @ 2017-10-08 20:25 幽幽冷瞳阅读(257) 评论(0) 推荐(0)

css中background合写样式

摘要：body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; }等价于 body { background-image: url("img_tree.png"); background-repeat: n 阅读全文

posted @ 2017-10-08 17:40 幽幽冷瞳阅读(1781) 评论(0) 推荐(0)

html5移动端主流适配方案

摘要：1、流式布局（百分比布局）案例：京东移动端优点：简单方便，只需要固定高度，宽度自适应；缺点：大屏幕手机实际显示的不协调。 2、响应式布局优点：可以节约成本，不用再做专门的web app网站（外包公司、小公司、博客)；缺点：工作量大、维护很难；国内大型企业在移动端很少用。 3、固定宽度案例阅读全文

posted @ 2017-10-01 10:01 幽幽冷瞳阅读(756) 评论(0) 推荐(0)