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:
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;">验 证 码</label>
<input type="text" class="c_code_msg" style="margin-right: 10px;">
<span class="msgs">获取短信验证码</span>
</form>
css:
form{margin:200px auto;500px;}
label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}
input{212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}
.msgs{display:inline-block;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