归档: 2015

0

JS-OJ(1)

最近在做LeetCode有各种语言。刚好有JavaScript。做做算法的同时也能熟悉JS。 Number of 1 Bits Write a function that takes an unsigned integer and returns the number of ’1’ bits it has (also known as the Hamming weight).For example, the 32-bit integer ’11’ has binary representation 00000000000000000000000000001011, so the function should return 3. 1234567891011var hammingWeight = function(n) { var bits = n.toString(2); var pos = bits.indexOf("1"); var i = 0; while(pos > -1) { i++; pos = bits.indexOf("1",pos+1); } return i; }; 求汉明重量。就是找出一个二进制的数字中有多少个1。直接用最暴力的方法就是转化之后一个个数出来。Number类型的toString()方法返回字符串形式的数值,传递一个表示基数的参数能返回对应进制。String类型的indexOf()从字符串中搜索给定的子字符串,返回位置。第二个参数表示从字符串中的哪个位置开始搜索。上面的方法就是遍历一个字符串的感觉了看C的解法都是右移啊,与运算啊什么的。1234567891011var hammingWeight = function(n) { var re = 0; while(0 !== n) { n = n&(n-1); ++re; } return re;}; 可是这个解法用的时间比我前面的解法还要多几毫秒。然后用上面的位运算换成C语言来写。结果吓尿了哈哈:JS用了170msc用了1ms…根本不是一个重量级啊…Number of 1 Bits

0

重构练习-1

前面太自大了。。怎么能叫前端呢。还只是重构一只呀。 Rating星星的CSS基本实现html:1234567<div class="rating right"> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div> less:123456789101112131415161718192021.rating{ unicode-bidi: bidi-override; direction: rtl; text-align: center; i{ color: #E4E4E4; cursor: pointer; position: relative; }}.rating > i:hover,.rating > i:hover ~ i{ color: transparent;}.rating > i:hover:before,.rating > i:hover ~ i:before{ content: '\f005'; color: #FFDF56;}

0

兼容性小结(1)

开学了。我又忘记更博了。啊~ 这次记录了一些兼容性的东西: RM8005: IE6 IE7 IE8(Q)行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部。 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落:A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box. 由上面的描述可以得到以下结论:如果一个元素浮动前是一个行内元素,则该元素浮动后,顶部应与其之前所在的行框顶部对齐。 此问题的触发条件:同一个父容器内有多个行内元素;某些为非浮动元素,某些为浮动元素(可以是左浮动或右浮动);浮动的子元素不都是位于非浮动的子元素之前。

0

移动端重构小节(2)

话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足(重要的事情说三遍)要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和PC端会用到的东西。这也是高大上的(对我来说)响应式布局。CSS3 @media 查询仔细再看一遍才发现有些地方误解了。语法:123@media mediatype and|not|only (media feature) { CSS-Code;} 之前用的是@media all and (max-width:640px)以为前面的all是所有的尺寸=。=其实前面的是媒体类型,后面的是媒体功能。媒体类型主要使用:all print screen speech。看来一般用all了。媒体功能就很多了,这里不写。一般是定义大小和分辨率。兼容性:IE9以下需要引入JS文件:Respond.js。放到底部,并且要http协议才能用。当然会有一点延迟啦。写在媒体查询之外的样式会应用在全网页。后面做一个项目的时候用响应式设计,刚开始做的是移动端,设计师切好图我就直接写了。然后发现一个坑爹的事情,导致我拿到PC端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通,不然就是在给自己挖好多好多的坑(啊)。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。

0

移动端重构小结(1)

前言:我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己! 初始化meta标签<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />移动端的页面一定会用到的meta标签。相关概念: meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持 主要参数有下面几个: maximum-scale:用户可以缩放的最大值 minimum-scale:用户可以缩放的最小值 initial-scale:viewport的默认缩放大小 width:固定viewport的宽度 height:固定viewport的高度 user-scalable:是否允许用户缩放 前三个参数都是缩放相关的,它们的值是viewport的缩放大小,他们仅仅改变缩放大小,并不是改变viewport的实际大小。 之后就是width和height,修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器(页面区域)在屏幕上的默认大小。可以是具体的数值,也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上,防止出现横向滚动条就可以使用 最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样 参考:移动端的meta viewport 更详细的文章:移动前端开发之viewport的深入理解

0

JS-动画框架

慕课网教程地址:JS动画效果 速度动画本门教程的基础。实现的是分享按钮的移出。首先要知道一个东西:定时器 HTML DOM setInterval() 方法定义和用法setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法setInterval(code,millisec[,"lang"])–W3Cschool 网页中的JS就是不断的执行改变属性的函数,比如距离,透明度来达到动画的效果:timer = setInterval(function (){},30)后面的就是时间啦,每隔多少秒重复执行前面的(匿名)函数。用clearInterval(timer)来结束计时器。最基本的代码:1234567891011121314151617181920212223242526272829window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(0); } oDiv.onmouseout = function () { startMove(-200); }}var timer = null;function startMove (iTarget) { clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; }else{ speed = 10; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30)} 首先是鼠标一入一出的时候执行函数。 当函数的开头没有clearInterval(timer)时,每次移入DIV就会触发一次定时器:timer = setInterval(),旧的定时器还没关闭,新的定时器就开始工作了,就会造成叠加,速度就会不是匀速运动而是越来越快(鼠标放在上面越久) 下面的逻辑就通过对动画的分析能知道应该怎么写。

0

前端练习-大讲堂(2)

中午了=。= 等爸爸回来吃饭~先写点东西。 全局定义清除浮动:在HTML里加上.clear-fix1234567891011.clear-fix:after{ content: ""; display: table; clear: both;}.clear-fix { *zoom: 1;} 为了IE6/7/8兼容性,解决:after不支持的问题,加上zoom:1; 兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题。 出处:CSS中zoom:1的作用 ,小标签大作用

0

前端练习-大讲堂(1)

本来参加的实习因为各种原因现在还没有设计图发下来= = 所以先打点其他的作业练手练手。大概用了两天的下午重构,以及一个多小时弄兼容性=。= 虽然最后IE7还是没解决好。先写下这些东西了。 设计图其实可以在网上找到原型的~给成长加点料-腾讯大讲堂只不过现在排版什么都更新了。重构后地址:DJT.QQ.COM HTML&CSS&JS这次尝试用了HTML5的标签,发现还有很多地方不熟悉。基本的标签有 header footer article section nav 嗯 这几个用的比较多。摘抄一些网上的经验: HTML对IE6/7/8的兼容 在JS中创造HTML5的标签:123456(function(){ var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption']; for (var i = 0; i < element.length; i++) { document.createElement(element[i]); }; })();

0

CSS基础补充(1)

在给别人讲解一些重构的内容的时候,发现自己还有好多基础没有补上=。= 平时都是打完页面就没有想太多东西,或者解决了问题没有总结。 于是乎看了一些文章,在这里记录一下。 盒子模型 内边距外边距不会遮挡后面的元素 在 CSS 中,width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 外边距可以是负值,而且在很多情况下都要使用负值的外边距。 在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的边界向里收,文档流认的只是这个边界,不会管你实际的尺寸是多少。 margin百分比:相对于父元素 避免浏览器变小浮动乱跑:在所有盒子外面包裹一个container,确定宽度并使他居中 注意padding和width不要一起用。当设置width为100%的时候,会得到浏览器窗口的大小,但是padding却是另外计算的,所以会出现水平滚动条,多出来的padding撑出屏幕。

0

下拉菜单(2)

你知道我这几天都在干嘛吗^_^今天下午买的手柄到了!!!好开熏。