数组操作
增删改查 | |
var arr = ["李白","杜甫", "李子", "李猫","杜牧","李商隐"]; | |
arr.push("白居易"); | |
arr.pop(); | |
arr.unshift("李思萌"); | |
arr.shift(); | |
console.log(arr); | |
删除指定位置, 还可以添加新的元素 | |
arr.splice(2, 2, "岑参", "王维"); | |
console.log(arr); | |
数组拼接 a.concat(b) 将b拼接到a | |
var a = [1]; | |
var b = [2]; | |
var c = [3]; | |
// console.log(a.concat(b, c)) | |
console.log(a.concat(b).concat(c)) | |
反转数组 | |
console.log(arr.reverse()) | |
指定规则 返回字符串 join() | |
var arr2 = [1,2,3,4,5]; | |
console.log(arr2.join("-*-")); | |
sort() 排序 | |
var ns = [1,25,78,4]; | |
console.log(ns.sort()) | |
正确打开方式 | |
ns.sort(function(a, b) { | |
// a b数组中相邻的两个值 | |
// 如果 返回值 大于0 则交换a和b的值 | |
// 如果 返回值 小于等于0 则不交换 | |
return a-b; | |
}) | |
console.log(ns) |
元素的获取
1.getElementsById 根据Id名获取一个元素
2.getElementsByTagName 根据标签名获取元素,返回一个数组
3.getElementsBbyClassName 根据class名获取元素,返回一个数组
4.querySeletor 获取一个元素,推荐使用,用法类似写css
5.querySelectorAll 返回一个元素数组
var arr = [1,2,3]; |
var obj = { |
key : value |
} |
人 { |
姓名: dong , |
性别: boy , |
年龄: 18 , |
} |
var obj = new Object(); |
obj.aaa = 1; |
console.log(obj.aaa); |
获取元素 | |
var pTitle = document.getElementById("title"); | |
console.log(pTitle); | |
pTitle.style.color = "red"; | |
var ps = document.getElementsByTagName("p"); | |
for (var i=0; i<ps.length; i++) { | |
ps[i].style.color = "pink" | |
} | |
var roles = document.getElementsByClassName("role"); | |
console.log(roles); | |
获取 section 下的role | |
var sec = document.getElementsByTagName("section")[0]; | |
var secRoles = sec.getElementsByClassName("role"); | |
console.log(secRoles); | |
es 6获取元素 | |
var secRoles2 = document.querySelectorAll("body>p"); | |
console.log(secRoles2) |
Date
1.获取年月日时分秒
2.声明+初始化
var date = new Date();
console.log(date.tolocalString()) 将时间戳本地化
3.getFullYear() 年
getMonth() 月
getDate() 日
getDay() 日期
getHours() 时
getMinutes() 分
getSeconds() 秒
getTime() 获取1970、1、1号至今的毫秒数
案例1:实现电子时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>YYYY/MM/DD hh:mm:ss</h1>
</body>
<script>
var h1 = document.getElementsByTagName("h1")[0];
function setH1() {
// 获取时间戳
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var riqi = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// var str = year + "/" + month + "/" + riqi + " " + hour + ":" + minute + ":" + second;
var str = `${year}/${month}/${riqi} ${hour}:${minute}:${second}`;
// 通过innerHTML对标签的内容进行获取及修改
h1.innerHTML = str;
}
// 函数的执行
setH1();
// 定时器
// 每间隔1000毫秒,执行一次function
var timer = setInterval(function(){
setH1();
}, 1000)
</script>
</html>
案例2:实现时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
* {
margin: 0;
padding: 0;
}
.clock {
width: 200px;
height: 200px;
border: 10px solid lightgray;
margin: 0 auto;
border-radius: 50%;
box-shadow: 5px 5px 5px lightgray;
background-color: #fff;
position: relative
}
.clock p {
width: 200px;
height: 20px;
/* background-color: pink; */
line-height: 20px;
position: absolute;
top: 90px;
}
.clock p span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
/* background-color: gold; */
}
#hour {
position: absolute;
transform-origin: center bottom;
width: 6px;
height: 50px;
background-color: tomato;
left: 97px;
top: 50px;
}
#minute {
position: absolute;
transform-origin: center bottom;
width: 4px;
height: 70px;
background-color: deepskyblue;
left: 98px;
top: 30px;
}
#second {
position: absolute;
transform-origin: center bottom;
width: 2px;
height: 90px;
background-color: hotpink;
left: 99px;
top: 10px;
}
</style>
</head>
<body>
<div class="clock">
<p><span>1</span></p>
<p><span>2</span></p>
<p><span>3</span></p>
<p><span>4</span></p>
<p><span>5</span></p>
<p><span>6</span></p>
<p><span>7</span></p>
<p><span>8</span></p>
<p><span>9</span></p>
<p><span>10</span></p>
<p><span>11</span></p>
<p><span>12</span></p>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
<script>
// 获取数字
var ps = document.getElementsByTagName("p");
// 获取三个指针
var dHour = document.getElementById("hour");
var dMinute = document.getElementById("minute");
var dSecond = document.getElementById("second");
//定时器
var timer = null;
// 设置数字的位置
function setNums() {
for (var i=0; i<ps.length; i++) {
// ps[i].style.transform = `rotate(${120 + i*30}deg)`;
ps[i].style.transform = 'rotate(' + (120 + i*30) + 'deg)';
// 获取p下边的span标签
var span = ps[i].getElementsByTagName("span")[0];
span.style.transform = 'rotate(' + ((120 + i*30)*-1) + 'deg)';
}
}
setNums();
// 开启定时器
timer = setInterval(function() {
changeZhen();
}, 1000)
function changeZhen() {
// 获取时间戳
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s/60;
var h = date.getHours() + m/60;
dSecond.style.transform = `rotate(${s * 6}deg)`;
dMinute.style.transform = `rotate(${m * 6}deg)`;
dHour.style.transform = `rotate(${h * 30}deg)`;
}
</script>
</html>