分类 首页 下的文章 - 吴渭明的博客

【javascript】数字效果

2046

//id,最终显示数字,数字变化开始值,变化持续时间,小数点位数
    function countUp(id, endVal, startVal, duration, decimal) {  
        var startTime = 0;
        var dec = Math.pow(10, decimal);
        var progress,value;
        function startCount(timestamp) {
            if(!startTime) startTime = timestamp;
            progress = timestamp - startTime;
            value = startVal + (endVal - startVal) * (progress / duration);
            value = (value > endVal) ? endVal : value;
            value = Math.floor(value*dec) / dec;
            jquery('#'+id).html(value.toFixed(decimal));
            progress < duration && requestAnimationFrame(startCount)
        }
        requestAnimationFrame(startCount)
    }

特性学习【JAVASCRIPT】-正则表达式

javascript实现正则表达式的两种方式

第一种 字面符

  var reg = /\bis\b/g;
  var test_str='He is a boy,is it?';
  test_str=test_str.replace(reg,'IS');
  console.log(test_str);

其中'\b'表示单词边界,'/g'表示全局范围,该段js运行结果为
'He IS a boy,IS it?
第二种 RegExp对象

  var reg = new RegExp('\\bis\\b','gi');
  var test_str='He is a boy,IS it?';
  test_str=test_str.replace(reg,'IS');
  console.log(test_str);

效果跟第一种也是一样的,现在假如需要忽略大小写,除了增加'g'以外,还在增加'i'(忽略大小写)。

- 阅读剩余部分 -

特性学习【css3】-一些细节

1.line-height:是两行文字基线之间的距离。
2.box-sizing:border-box 可以减少一些计算过程,也就是将border和padding的宽度放到内容宽度里面了。
3.li之间是有间隔的(在前端渲染时),需要设置负的margin值。
4.li+li这个css选择器会选择除了第一个以外的所有li(此组内)。
5.css3在需要计算的时候可以使用calc函数。
6.内联元素在需要设置宽高的时候,可以设置为inline-block,同理块级元素需要放到同一行的时候,可以使用浮动,也可以使用inline-block。

特性学习【CSS3】-PX EM REM在WEB前端开发中的区别

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来。当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列。是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢?

为什么我们需要使用相对字体大小呢?

或许我们最能直接想到的一点就是它关于CSS3的一些东西。很好理解的是它是一种字号计算方式,尤其是当你在为多种分辨率进行字号计算的时候。想想要在手机上实现字体变大或者变小的时候,你不得不要反复重新计算对象的字体大小,这是相当耗时间的。这个时候相对字体大小的设置才凸显出了它的有用之处。当你要在不同的样式结构中进行设置字体大小的时候,使用em或者rem能够让你针对一个具体的视屏进行字体大小的增大或者减小。

px,em,rem的区别在哪?

Px是一个绝对字体大小,em则是基于基数(比如:1.5em)来计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。

- 阅读剩余部分 -

特性学习【es6】-10个最佳ES6特性

ES6,正式名称是ECMAScript2015,但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中。如果你还没用过ES6,现在还不算太晚…

下面是10个ES6最佳特性,排名不分先后:

函数参数默认值
模板字符串
多行字符串
解构赋值
对象属性简写
箭头函数
Promise
Let与Const

模块化

- 阅读剩余部分 -