奇舞学院JS01—如何写好原生JS

本文主要是介绍奇舞学院JS01—如何写好原生JS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、交通灯实例

<!DOCTYPE html>
<html>
<head><title>js04-1</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="js04-1.css"><script type="text/javascript" src="js04-1.js"></script>
</head>
<body><ul id="traffic" class="wait"><li><span></span></li><li><span></span></li><li><span></span></li></ul>
</body>
</html>

#traffic > li{display: block;
}#traffic span{display: inline-block;width: 50px;height: 50px;background-color: gray;margin: 5px;border-radius: 50%;
}#traffic.stop li:nth-child(1) span{background-color: #a00;
}#traffic.wait li:nth-child(2) span{background-color: #aa0;
}#traffic.pass li:nth-child(3) span{background-color: #0a0;
}

 // example01// const traffic = document.getElementById('traffic');// (function reset() {// 	traffic.className = 'wait';// 	setTimeout(function(){// 		traffic.className = 'stop';// 		setTimeout(function(){// 			traffic.className = 'pass';// 			setTimeout(reset,2000);// 		},2000);// 	},2000);// })();// example02
//  const traffic = document.getElementById('traffic');//  var stateList = ['wait' , 'stop' , 'pass'];// var currentStateIndex = 0;// setInterval(function(){
// 	var state = stateList[currentStateIndex];
// 	traffic.className = state;
// 	currentStateIndex = (currentStateIndex + 1) % stateList.length;
// },2000);// example03
// // 数据抽象，过程抽象（如开门、开窗、的“开”可抽化为open（））函数式编程
// const traffic = document.getElementById('traffic');// function poll(...fnList){
// 	// 轮流/循环的调用传入的函数
// 	let stateIndex = 0;// 	return function(...args){
// 		let fn = fnList[stateIndex++ % fnList.length];
// 		return fn.apply(this,args);
// 	}
// }// function setState(state){
// 	traffic.className = state;
// }// let trafficStatePoll = poll(setState.bind(null,'wait'),
// 							setState.bind(null,'stop'),
// 							setState.bind(null,'pass'));
// setInterval(trafficStatePoll,2000);// example05
const traffic = document.getElementById('traffic');function wait(time){return new Promise(resolve => setTimeout(resolve, time));
}function setState(state){traffic.className = state;
}function reset(){Promise.resolve().then(setState.bind(null,'wait')).then(wait.bind(null,1000)).then(setState.bind(null,'stop')).then(wait.bind(null,'2000')).then(setState.bind(null,'pass')).then(wait.bind(null,3000)).then(reset);
}reset();

2、数据求和问题:检测一个程序员的代码效率意识，追求一个算法的最高效率

算法学习/刷题网站 leetcode

网址： https://leetcode-cn.com/problemset/all/

 // version01 复杂度o（N^2）双重循环// let list = [11, 4, 9, 3, -1, -3, 6, 7, 9, 13, 8];// function map(list) {// 	let ret = [], len = list.length;// 	for (var i = 0; i < len; i++) {// 		for (var j = i + 1; j < len; j++) {// 			if (list[i] + list[j] == 10) {// 				ret.push([list[i], list[j]]);// 			}// 		}// 	}// 	return ret;// }// console.log(JSON.stringify(map(list)));// verson02 时间复杂度为 o(n*logn)+o(n) 先排序再遍历let list = [11, 4, 9, 3, -1, -3, 6, 7, 9, 13, 8];function map(list){let ret = [];list = list.sort((a,b)=>a-b);for (var i = 0; j = list.length - 1; i < j) {let a = list[i], b = list[j];if (a + b === 10) {ret.push([a,b]);i++;j--;}else if (a + b < 10) {i++;}else{j--;}}return ret;}console.log(JSON.stringify(map(list)));