JS

工作记录-手动触发onresize2018.8.12

吴阳 No Comments

const ev = new Event('resize', { bubbles: true, cancelable: false });
window.dispatchEvent(ev);

MDN

工作记录–window.onresize与$(window).resize的区别2017.3.23

吴阳 No Comments

window.onresize只能绑定一个函数,而jquery的resize可以绑定多个函数。
举个例子:

window.onresize = function (){ console.log(1)}; // 1
window.onresize = function (){ console.log(2)}; // 2

重复的赋值,后一个会覆盖前一个。

$(window).resize(function(){console.log(3)}); // 3
$(window).resize(function(){console.log(4)}); // 3 和 4交替打印

这样就实现了一个resize事件绑定了多个函数。
注意:此例子中,$(window).resize(function(){console.log(3)}); 会打印出1和3,因为之前有绑定事件,进一步说明,jquery的resize事件不会覆盖原生有的函数。

JavaScript创建对象的应用

吴阳 No Comments

最优方式:


 function Person(name,age,job){//构造函数首字母大写
 this.name = name;
 this.age = age;
 this.job = job;
 }
 Person.prototype.say = function(){
 alert(this.name);
 //将方法绑定到原型上是为了避免实例的重复复制,毕竟功能是一样的
 //在实例调用该属性时,会从原型链上去查找,直到找到该属性
 //如果实例有一个重名属性,将会调用实例本生属性
 //若想调用原型链上的属性,必须使用delete删除该属性
 }
 var person1 = new Person('wuyang',25,'web');
 person1.say();
 //将会弹窗'wuyang'

call() 的用法:
window.name = 'xxxxx';
person1.say.call(window);
person1.say.call(this);
person1.say.call();
//都会是弹窗xxxxx
注意:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组

感谢:于江水

拿来主义–2016.7.6(数字滚动效果)

吴阳 No Comments

原文地址:http://www.jb51.net/article/76538.htm
复制即可使用。
<html>
<head>
<title>数字滚动插件</title>
<meta charset="gb2312">
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<style>
/*数字滚动插件的CSS可调整样式*/
.mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 36px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
.mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}
.mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
</style>
</head>
<body>
<br><br>
有分隔符,有小数点:<div class="numberRun"></div> <br><br>
只有分隔符:<div class="numberRun2"></div> <br><br>
只有小数点:<div class="numberRun3"></div> <br><br>
无分隔符,无小数点:<div class="numberRun4"></div>
 
</body>
<script>
/**
* by Mantou qq:676015863
* 数字滚动插件 v1.0
*/
;(function($) {
 $.fn.numberAnimate = function(setting) {
 var defaults = {
 speed : 1000,//动画速度
 num : "", //初始化值
 iniAnimate : true, //是否要初始化动画效果
 symbol : '',//默认的分割符号,千,万,千万
 dot : 0 //保留几位小数点
 }
 //如果setting为空,就取default的值
 var setting = $.extend(defaults, setting);
 
 //如果对象有多个,提示出错
 if($(this).length > 1){
 alert("just only one obj!");
 return;
 }
 
 //如果未设置初始化值。提示出错
 if(setting.num == ""){
 alert("must set a num!");
 return;
 }
 var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\
 <span class="mt-number-animate-span">0</span>\
 <span class="mt-number-animate-span">1</span>\
 <span class="mt-number-animate-span">2</span>\
 <span class="mt-number-animate-span">3</span>\
 <span class="mt-number-animate-span">4</span>\
 <span class="mt-number-animate-span">5</span>\
 <span class="mt-number-animate-span">6</span>\
 <span class="mt-number-animate-span">7</span>\
 <span class="mt-number-animate-span">8</span>\
 <span class="mt-number-animate-span">9</span>\
 <span class="mt-number-animate-span">.</span>\
 </div>';
 
 //数字处理
 var numToArr = function(num){
 num = parseFloat(num).toFixed(setting.dot);
 if(typeof(num) == 'number'){
 var arrStr = num.toString().split(""); 
 }else{
 var arrStr = num.split("");
 }
 //console.log(arrStr);
 return arrStr;
 }
 
 //设置DOM symbol:分割符号
 var setNumDom = function(arrStr){
 var shtml = '<div class="mt-number-animate">';
 for(var i=0,len=arrStr.length; i<len; i++){
 if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){
 shtml += '<div class="mt-number-animate-dot">'+setting.symbol+'</div>'+nHtml.replace("{{num}}",arrStr[i]);
 }else{
 shtml += nHtml.replace("{{num}}",arrStr[i]);
 }
 }
 shtml += '</div>';
 return shtml;
 }
 
 //执行动画
 var runAnimate = function($parent){
 $parent.find(".mt-number-animate-dom").each(function() {
 var num = $(this).attr("data-num");
 num = (num=="."?10:num);
 var spanHei = $(this).height()/11; //11为元素个数
 var thisTop = -num*spanHei+"px";
 if(thisTop != $(this).css("top")){
 if(setting.iniAnimate){
 //HTML5不支持
 if(!window.applicationCache){
 $(this).animate({
 top : thisTop
 }, setting.speed);
 }else{
 $(this).css({
 'transform':'translateY('+thisTop+')',
 '-ms-transform':'translateY('+thisTop+')', /* IE 9 */
 '-moz-transform':'translateY('+thisTop+')', /* Firefox */
 '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */
 '-o-transform':'translateY('+thisTop+')',
 '-ms-transition':setting.speed/1000+'s',
 '-moz-transition':setting.speed/1000+'s',
 '-webkit-transition':setting.speed/1000+'s',
 '-o-transition':setting.speed/1000+'s',
 'transition':setting.speed/1000+'s'
 }); 
 }
 }else{
 setting.iniAnimate = true;
 $(this).css({
 top : thisTop
 });
 }
 }
 });
 }
 
 //初始化
 var init = function($parent){
 //初始化
 $parent.html(setNumDom(numToArr(setting.num)));
 runAnimate($parent);
 };
 
 //重置参数
 this.resetData = function(num){
 var newArr = numToArr(num);
 var $dom = $(this).find(".mt-number-animate-dom");
 if($dom.length < newArr.length){
 $(this).html(setNumDom(numToArr(num)));
 }else{
 $dom.each(function(index, el) {
 $(this).attr("data-num",newArr[index]);
 });
 }
 runAnimate($(this));
 }
 //init
 init($(this));
 return this;
 }
})(jQuery);
 
$(function(){
 
 //初始化
 var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","});
 var nums = 15343242.10;
 setInterval(function(){
 nums+= 3433.24;
 numRun.resetData(nums);
 },3000);
 
 
 var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","});
 var nums2 = 15343242;
 setInterval(function(){
 nums2+= 1433;
 numRun2.resetData(nums2);
 },2000);
 
 
 var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000});
 var nums3 = 52353434.343;
 setInterval(function(){
 nums3+= 454.521;
 numRun3.resetData(nums3);
 },4000);
 
 var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});
 var nums4 = 52353434;
 setInterval(function(){
 nums4+= 123454;
 numRun4.resetData(nums4);
 },3500);
 
});
</script>
</html>

拿来主义–2016.7.5(js单线程)

吴阳 No Comments

1、js的单线程

只有一个执行栈,运行完了才运行任务列表(如:setTimeout())。

当执行栈内有函数拖延了时间,会导致setTimeout运行的时间并不准。即便是setTimeout(foo(),0),也会等待执行栈内的函数运行完才会执行。

原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html

2、sort函数

排序

拿来主义–JS奇技淫巧2016.4.5

吴阳 No Comments

// 输出n个`abc`拼接的字符串
var str = new Array(n+1).join('abc');
→abcabc...