或许能用上或许用不上的几个方法
- 选项卡
//具有鼠标事件的标签
var lis = document.getElementsByTagName("li");
//需要改变的内容
var divs = document.getElementsByClassName("content");
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
for(let j = 0; j < lis.length; j++){
divs[j].style.display = "none";
}
divs[i].style.display = "block";
}
}
选项卡.gif
- 原生JS封装动画（Animator.js），搭配动画算子（easing）使用
function Animator(duatrion, easing, process) {
/*动画周期*/
this.duration = duatrion || 1000;
/*动画使用到的算子*/
this.easing = easing;
/*动画执行期间需要执行的回调函数*/
this.process = process;
if(!(this.easing instanceof Function)){
this.easing = function (p) {
return p;
}
}
}
/*启动动画， 参数：表示是否循环*/
Animator.prototype.start = function (loop) {
if(!(this.process instanceof Function)){
return ;
}
var startTime = new Date();
var p;
var self = this;
this.animatorId = requestAnimationFrame(function step() {
p = Math.min(1, (new Date() - startTime) / self.duration);
self.process(self.easing(p), p);
if (p == 1) {
if (loop) {
startTime = new Date();
}else{
return;
}
}
console.log("a");
self.animatorId = requestAnimationFrame(step);
})
}
Animator.prototype.stop = function () {
cancelAnimationFrame(this.animatorId);
}
- 原生JS封装AJAX(myAjax.js)
var ajax = {
get : function (url, onSuccess, onFail) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
if(onSuccess instanceof Function){
onSuccess(xhr.responseText);
}
}else{
if(onFail instanceof Function){
onFail("你的请求失败，请重试");
}
}
}
};
xhr.send(null);
},
post : function (url, data, onSuccess, onFail) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
if(onSuccess instanceof Function){
onSuccess(xhr.responseText);
}
}else{
if(onFail instanceof Function){
onFail("你的请求失败，请重试");
}
}
}
};
if(!(data instanceof FormData)){
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
xhr.send(data);
}
}
- 两个元素之间的交换
//1
var a = 3 , b = 30;
[a,b] = [b,a];
console.log(a + " " +b);
//2
var a = 4, b = 6;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a + " " +b);
- 利用数组的slice方法可以将 含有length属性的特殊对象转换成数组
<!-- multiple支持上传多个文件 -->
文件上传：<input type='file' multiple="multiple" />
<script>
var inputFile = document.querySelector("input[type=file]");
inputFile.onchange = function(){
console.log(this.files);
var fileArr = Array.prototype.slice.call(this.files);
console.log(fileArr);
}
</script>
