js基礎知識應用
JS簡單小記事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
border: 1px solid black;
height: 200px;
font-size: 20px;
overflow: hidden;
}
li {
line-height: 30px;
}
#box {
width: 500px;
height: 50px;
margin: 0 auto;
}
#text {
margin-left: 100px;
height: 30px;
width: 280px;
}
#btn {
height: 30px;
width: 40px;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li></li>
</ul>
<input type="text" id="text" value=""><button id="btn">輸入</button>
</div>
<script>
let list = document.getElementById('list');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
console.log(list,text,btn)
btn.onclick = function(){
let value = text.value;
let note = list.innerHTML;
list.innerHTML = note + '<li>'+ value + '</li>';
text.value = '';
}
</script>
</body>
</html>
JS簡單一個驗證碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width: 500px;
margin: 200px auto;
text-align: center;
}
</style>
</head>
<body>
<div id = "box">
<span id = "show">請點擊開始</span>
<button id = "btn">開始</button>
</div>
<script>
let show = document.getElementById('show');
let btn = document.getElementById('btn');
let aa = null;
btn.onclick = function(){
let value = btn.innerText;
if(value === '開始'){
aa = setInterval(name,100);
btn.innerText = '停止';
}
else{
clearInterval(aa);
btn.innerText = '開始'
}
}
function name(){
let ary = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE','FFF', 'GGG', 'HHH', 'JJJ', 'KKK', 'LLL', 'ZZZ','XXX', 'CCC', 'VVV', 'BBB', 'NNN', 'MMM', 'QQQ', 'EEE', 'WWW ', 'RRR', 'TTT', 'YYY', 'III', 'OOO', 'PPP', 'MMM', 'UIO', 'BNH', 'GYH', 'LKI'];
let index = Math.round(Math.random()*(ary.length-1-0)+0);
let name1 = ary[index];
show.innerText = name1;
}
</script>
</body>
</html>
倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
height: 300px;
background: -webkit-linear-gradient(top right, red, green, orange);
line-height: 300px;
text-align: center;
font-size: 100px;
font-weight: 700;
margin: 200px auto;
-webkit-background-clip: text;
color: transparent;
font-family: '等線';
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
let box = document.getElementById('box')
let endTime = new Date('2019-12-23 19:44');
let num = null;
let addZero = val => val < 10 ? '0' + val : val;
setTime()
function setTime() {
let time = new Date();
let dirrTime = endTime - time;
if (dirrTime <= 0) {
clearInterval(num);
box.innerText = "xxx";
box.style.background = "red";
box.style.webkitBackgroundClip = "text";
console.log(box.style)
return
}
let hour = Math.floor(dirrTime/3600000);
let min = Math.floor((dirrTime - hour*3600000)/60000);
let sec = Math.floor((dirrTime - hour*3600000 - min*60000)/1000);
let value = addZero(hour) + '時' + addZero(min) +'分'+ addZero(sec) +'秒'
box.innerText = value;
}
num = setInterval(setTime, 1000);
</script>
</body>
</html>
排序的三種方式
1.冒泡排序
已經執行過的輪數'
（ary.length-1）
let ary = [12,23,11,34,10,9];
function buble(ary){
for (var i = 0; i < ary.length-1; i++) {
for (var j = 0; j < ary.length-1-i; j++) {
if(ary[j]>ary[j+1]){
let temp = ary[j];
ary[j] = ary[j+1];
ary[j+1] = temp;
}
}
}
return ary
}
console.log(buble(ary))
2.插入排序
let ary = [12, 23, 45, 11, 10, 23];
function insert(ary) {
let handAry = [];
handAry.push(ary[0]);
for (var i = 1; i < ary.length; i++) {
let item = ary[i]
for (var j = handAry.length - 1; j >= 0; j--) {
let cur = handAry[j]
if (item > cur) {
handAry.splice(j + 1, 0, item);
break;
}
if (j === 0) {
handAry.unshift(item);
}
}
}
return handAry
}
console.log(insert(ary)
3.快速排序
let ary = [3, 4, 2, 1];
function quick(ary) {
if (ary.length <= 1) {
return ary
}
let middleIndex = Math.floor(ary.length / 2)
let middleValue = ary.splice(middleIndex, 1)[0];
let leftAry = [];
let rightAry = [];
for (var i = 0; i < ary.length; i++) {
if (ary[i] < middleValue) {
leftAry.push(ary[i])
} else {
rightAry.push(ary[i])
}
}
return quick(leftAry).concat(middleValue, quick(rightAry))
}
console.log(quick(ary))
去重的三種方式
去重一`
創建一個空數組，循環原數組的每一項，檢測每一項在空數組中是否存在，不存在，就存入到空數組中，存在就開始下一個
let ary = [12,23,34,12,23];
function fn(n) {
let newAry = []
for (var i = 0;i<ary.length;i++){
let item = ary[i]
if(!newAry.includes(item)){
newAry.push(item);
}
}
reyurn newAry
}
console.log(fn(ary))
去重二
循環數組每一項，拿當前項和後面的數依次作比較，如果後面的數和當前項相等，那就在原數組裏刪除與之相等的數
let ary = [1,2,3,1,2,3,1,2,3];
let fn =function (ary){
for (var i=0;i<ary.length;i++){
let item = ary[i];
for (var j=i+1;j<ary.length;j++){
let cur = ary[j]
if(item===cur){
ary.splice(j,1);
j--
}
}
}
}
fn(ary)
console.log(ary)
去重三
利用屬性名獲取屬性值獲取不到爲undefined的特點
循環數組的每一項，把數組的每一項放到對象裏（讓鍵值對的key和value都等於那一項）
let ary = [1,1,2,3,1,2,3];
function fn(ary){
let newObj = {};
for(var i = 0; i < ary.length; i++){
if(newObj[ary[i]] !== undefined){
ary.splice(i,1)
i--
}else{
newObj[ary[i]] = ary[i]
}
}
}
fn(ary)
console.log(ary)
let ary = [1,1,2,3,1,2,3];
function fn(ary){
let newObj = {};
for(var i = 0; i < ary.length; i++){
if(newObj[ary[i]] !== undefined){
ary[i] = ary[ary.length-1];
ary.length--;
i--;
}else{
newObj[ary[i]] = ary[i]
}
}
}
fn(ary)
console.log(ary)`
