标签归档js

ng2-EventEmitter

吴阳 No Comments

demo:

1.组件样式问题

A组件嵌入了B组件,那么被嵌入的结构的样式应写在B组件内。

2.组件通讯

父组件中,对子组件进行事件绑定:
html

<app-loader [url]="'/api/index/index'" [method]="'get'" [body]="body" (onReceive)="receiveTheData($event)"></app-loader>

ts

export class FindComponent implements OnInit {
  receiveTheData(action) {
    // 从loader组件返回action
    // console.log(action);
    this.topCarousel = action.locationAds[0].ads;
    this.list = action.hotProducts;
  }
}

子组件输出
ts

export class LoaderComponent implements OnInit, OnChanges {
data;
@Output() onReceive = new EventEmitter();
  receiveTheData() {
    this.onReceive.emit(this.data);
  }
  ngOnInit(){
   this.ajax(){

   //假如异步返回是res的结果

   this.data = res;
   this.receiveTheData();
   }
 }
}

3.对于angular HTML中,各标签属性的应用。
模板绑定是通过 property 和事件来工作的,而不是 attribute。
在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。

举个例子:
data = '<p>123</p>'
<div [innerHTML]="data"></div>
输出:
<div>
<p>123</p>
</div>

工作记录–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事件不会覆盖原生有的函数。

拿来主义–JS奇技淫巧2016.4.5

吴阳 No Comments

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

工作记录–JS操作字符串2015.10.4

吴阳 No Comments

js 字符串操作函数

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。 
indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。 
charAt() – 返回指定位置的字符。 
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。 
match() – 检查一个字符串是否匹配一个正则表达式。 
substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。 
replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。 
search() – 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。 
slice() – 提取字符串的一部分,并返回一个新字符串。 
split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。 
length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。 
toLowerCase() – 将整个字符串转成小写字母。 
toUpperCase() – 将整个字符串转成大写字母。

工作记录-单行和双行文字的省略号,2015.10.12

吴阳 No Comments

//一行文字省略号
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
//两行文字省略号,此处是有2处需要出现省略号所以有个循环。
 for (i = 1; i < 3;i++){
 var text = document.getElementById('txt'+i);
 str = text.innerHTML;
 var textLeng = 16;
 if (str.length > textLeng) {
 text.innerHTML = str.substring(0, textLeng) + "...";
 }
 }

省略号

图片轮播–学习记录

吴阳 No Comments

来源慕课网:http://www.imooc.com/video/661

一、HTML部分

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="css/work.css">
 <script type="text/javascript" src="js/work.js"></script>
</head>
<body>
 <div class="content"> 
 <div class="img_box" id="img_box" style="left:-600px;">
 <img src="img/03.jpg" alt="图片3"><!-- 3号图附属图 -->
 <img src="img/01.jpg" alt="图片1">
 <img src="img/02.jpg" alt="图片2">
 <img src="img/03.jpg" alt="图片3">
 <img src="img/01.jpg" alt="图片1"><!-- 1号图附属图 -->
 </div>
 <a class="left_btn" id="prev">&lt;</a>
 <a class="right_btn" id="next">&gt;</a>
 <div class="img_dot" id="img_dot">
 <span index="1" class="on"></span><!-- 第一个小圆点默认亮起 -->
 <span index="2" ></span>
 <span index="3" ></span>
 </div>
 </div>
</body>
</html>

1、障眼法:图片的首尾利用附属图,避免函数的复杂性。

2、关键:利用绝对定位DIV,进行偏移,来实现轮播效果。style=”left:-600px;”。

二、CSS

*{ 
 margin: 0; 
 padding: 0; 
 text-decoration: none;
}
.content{
 width: 600px;
 height: 364px;
 border: 2px solid #000;
 position: relative;
 margin-left: 30px;
 margin-top: 50px; 
 position: relative;
 overflow: hidden;
 moz-user-select: -moz-none; 
 -moz-user-select: none; 
 -o-user-select: none; 
 -khtml-user-select: none; /* you could also put this in a class */ 
 -webkit-user-select: none;/* and add the CSS class here instead */ 
 -ms-user-select: none; 
 user-select: none;/**禁止选中文字*/ 
}
.img_box{
 width: 3000px;
 height: 364px;
 position: absolute;
 left: 0px;
 top: 0px;
 clear: both;
 z-index:1;
}
.img_box img{
 width: 600px;
 height: 364px;
 float: left;
 display: block;
}
.content a{
 color: #FFF;
 text-decoration: none;
 position: absolute;
 font-size: 40px;
 display: none;
 width: 45px;
 text-align: center;
 height: 45px;
 line-height: 45px;
 background-color: rgba(0,0,0,0.3);
 top: 165px;
 cursor: pointer;
 z-index:999;
}
.content:hover .left_btn,.content:hover .right_btn{
 display: block;/*鼠标经过.content时显示按钮*/
}
.content .left_btn{
 left: 30px;
}
.content .right_btn{
 left: 520px;
}
.content .left_btn:hover,.content .right_btn:hover{
 background-color: rgba(0,0,0,0.5);
}
.content .img_dot{
 width: 150px;
 height: 20px;
 position: absolute;
 left: 260px;
 bottom: 20px;
 z-index: 999;
}
.content .img_dot span{
 color: #FFF;
 width: 12px;
 height: 12px;
 margin: 3px;
 display: inline-block;
 background-color: rgba(0,0,0,0.7);
 border-radius: 50%;
 cursor: pointer;
 border: 1px solid #FFF;
}
.content .img_dot span:hover,.content .img_dot .on{
 background-color: #99FF00; 
}

1、背景透明:background-color: rgba(0,0,0,0.3);

2、小技巧:鼠标经过显示按钮。

.content:hover .left_btn,.content:hover .right_btn{
 display: block;/*鼠标经过.content时显示按钮*/
}

3、禁止选中文字

(1)<body onselectstart=”return false”> 也可以在DIV中使用

(2)在容器中加入该CSS

 moz-user-select: -moz-none; 
 -moz-user-select: none; 
 -o-user-select: none; 
 -khtml-user-select: none; /* you could also put this in a class */ 
 -webkit-user-select: none;/* and add the CSS class here instead */ 
 -ms-user-select: none; 
 user-select: none;/**禁止选中文字*/

三、JS

window.onload = function(){
 var prev = document.getElementById("prev");
 var next = document.getElementById("next");
 var img_box = document.getElementById("img_box");
 var buttons = document.getElementById('img_dot').getElementsByTagName('span');
 var index = 1;//为按钮赋一个初始值
 
 function showButton(){//小圆点高亮
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className=="on"){
 buttons[i].className="";
 break;
 }
 }
 buttons[index - 1].className = 'on';//第一个小圆点亮起来
 }
function animat(offset){//箭头切换的封装函数
 var newleft = parseInt(img_box.style.left)+ offset;//newleft是一个新left数值
 img_box.style.left = newleft +"px";
 if(newleft>=0){//当出现最后一张图的附属图时,将left值定为-1800px(真正的3号图)
 img_box.style.left = -1800 + "px" ;
 }
 if(newleft<=-2400){//当出现第一张图的附属图时,将left值定为-600px(真正的1号图)
 img_box.style.left = -600 + "px" ;
 }
 //debugger;
 }
prev.onclick = function(){//点击左箭头
 animat(600);
 index -= 1;//自减1
 if(index<1){//当index小于1(相当于说点到第一张图,没有上一张图了),应将index设为1
 index=3;
 }
 showButton();
 }
next.onclick = function(){//点击右箭头
 animat(-600);
 index += 1;//自加1
 if(index>3){//当index大于3(相当于说点到第三张图,再往下点没图了),应将index设为1
 index=1;
 }
 showButton();
 }
for (var i=0;i<buttons.length;i++) {//小按钮点击效果(小按钮在数组内,需要通过遍历数组才能用)
 buttons[i].onclick = function(){
 if(this.className=="on"){
 return;
 } 
 var myindex = parseInt(this.getAttribute("index"));//getAttribute方法获取自定义元素的属性,然后转换成整数
 var offset = - 600 *(myindex - index);//偏移量
 animat(offset);
 index = myindex;
 showButton();
 //debugger;
 }
 };
}

1、自减1和自加1:index -=1; index +=1;

2、获取自定义元素的属性:getAttribute

3、实现步骤

(1)箭头效果:偏移固定数值实现。

(2)小圆点的跟随高亮:获取当前小圆点。

(3)小圆点的切换效果:也是计算偏移量。