js小结

1.数组去重

const list = [1, 1, 2, 3, 6, 45, 8, 5, 4, 6, 5];
const uniqueList = [...new Set(list)]; 
// console.log(uniqueList);// [1, 2, 3, 6, 45, 8, 5, 4]

2.生成10位数的数组  无loop生成指定长度的数组

const List = len => [...new Array(len).keys()];
const list = List(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(list);

注意是箭头，要用es6

3.jquery获取兄弟元素并且动态显示html

 

 效果如图所示：

点击图片是，添加背景图，有箭头的，并且显示当前页和总总页数。

 

html:

<div id="cbtn">

<div id="cSlideUl">

<ul>

<li><img src="img/detail-original one.png" /><tt></tt></li>   //tt是js里面显示的分数

<li><img src="img/detail-original two.png" /><tt></tt></li>

<li><img src="img/detail-original three.png" /><tt></tt></li>

<li><img src="img/detail-original four.png" /><tt></tt></li>

<li><img src="img/detail-original five.png" /><tt></tt></li>

<li><img src="img/detail-original one.png" /><tt></tt></li>

<li><img src="img/detail-original two.png" /><tt></tt></li>

<li><img src="img/detail-original three.png" /><tt></tt></li>

<li><img src="img/detail-original four.png" /><tt></tt></li>

<li><img src="img/detail-original five.png" /><tt></tt></li>

</ul>

</div>

</div>

css：

//添加背景图

#cbtn li.hov {

background: url(../img/ImgHoverBg.png) no-repeat;

background-size: 266px 233px;

}

//分数显示的位置

#cbtn ul li tt {

color: #FFF;

position: absolute;

/* right: 10px; */

top: 57%;

left: 34%;

z-index: 999;

font-family: "????";

font-size: 28px;

line-height: 16px;

padding: 0 5px;

}

js:

//点击获取元素的索引值

$("#cbtn li").click(function() {

index = $("#cbtn li").index(this);

showImg(index);

});

//关键函数：通过控制i ，来显示图片

function showImg(i) {

$("#img img").eq(i).stop(true, true).fadeIn(800).siblings("img").hide();

$("#cbtn li").eq(i).addClass("hov").siblings().removeClass("hov");

$("#cbtn tt").eq(i).show(); //当前分数显示

$("#cbtn tt").eq(i).parent().siblings().find("tt").hide();//通过找tt 的父级元素找到tt兄弟元素，隐藏

}

//遍历没张图片，拼接出来

$("#cbtn tt").each(function(e) {

var str = (e + 1) + "/" + length;

$(this).html(str);

})

$("#cbtn tt").eq(0).show().parent().siblings().find("tt").hide();

4.js和jquery主要不同点

https://www.cnblogs.com/hyesc/articles/7586782.html

4.jquery点击切换图片，再点击又切换回去

var toggle = true;
$(".result-focus").click(function() {
if(toggle) {
$(".result-focus img").attr("src", "../../img/collection-focus.png")
toggle = false;
} else {
$(".result-focus img").attr("src", "../../img/collection-focused.png")
toggle = true;
}
})

5.js发送短信获取验证码倒计时

html:

<form>
<label style="float:left;">验&nbsp;&nbsp;证&nbsp;码</label>
<input type="text" class="c_code_msg" style="margin-right: 10px;">
<span class="msgs">获取短信验证码</span>
</form>

css:

form{margin:200px auto;width:500px;}
label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}
input{width:212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}
.msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;} //没发前的样式
form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}//倒计时的样式

js:

$(function () {
//获取短信验证码
var validCode=true;
$(".msgs").click (function () {
var time=30;
var code=$(this);
if (validCode) {
validCode=false;
code.addClass("msgs1");
var t=setInterval(function () {
time--;
code.html(time+"秒");
if (time==0) {
clearInterval(t);
code.html("重新获取");
validCode=true;
code.removeClass("msgs1");

}
},1000)
}
})
})

6.多行输入框，右下角显示当前输入的字数还有总字数。

html:

<textarea id="area" name="ss" placeholder="请输入文本内容"></textarea>
<p><span id="text-count">0</span>/400</p>

js：

/*字数限制*/
$("#area").on("input propertychange", function() {
var $this = $(this),
_val = $this.val(),
count = ""; //声明当前字数
if(_val.length > 400) {
$this.val(_val.substring(0, 400));
}
count = $this.val().length;
$("#text-count").text(count);
});

要显示剩余多少字

count = 400-$this.val().length;

 7.js技巧

    https://juejin.im/post/5d7659c76fb9a06b307068ed