js-prototype原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/commons.js"></script>
<script>
console.log(Date.now());
let date = new Date();
console.log(date.format("hh:mm:ss E"));
console.dir(Date)
</script>
</head>
<body>
</body>
</html>
js-系统对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(prompt("请输入您的电话号码"))
</script>
</head>
<body>
<p>hello</p>
</body>
</html>
js-定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log("aaaa")
function a() {
console.log("---2秒后才会执行的代码----")
}
window.setTimeout(function a(){
console.log("-------")
}, 1000)
console.log("over!!!")
</script>
</head>
<body>
</body>
</html>
js-setInterval轮询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
font-size: 100px;
width: 350px;
height:350px;
text-align: center;
margin: 100px auto 0;
}
</style>
<script>
function delay(){
setTimeout(function() {
delay()
}, 1000)
}
delay()
</script>
</head>
<body>
<h1 id="font">10</h1>
<script>
function randomRgb() {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
let a = (Math.random())
return `rgba(${r}, ${g}, ${b}, ${a})`
}
let h1 = document.getElementById("font");
let num = 10 ;
let playing = setInterval(function(){
h1.innerText = --num ;
h1.style.color = randomRgb();
h1.style.transition = `all .9s linear`
if (num == 0) {
h1.innerText = "OVER!" ;
clearInterval(playing)
}
}, 1000)
</script>
</body>
</html>
+0和-0的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a = +0 ;
var b = -0;
console.log(Object.is(a, b));
console.log(NaN === NaN);
console.log(isNaN(NaN));
console.log(Object.is(NaN, NaN));
</script>
</head>
<body>
</body>
</html>
setInterval和 var关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
for(let i=0 ; i < 5; i++) {
setTimeout(function(){
console.log(i);
}, 0)
}
for(var i=0 ; i< 3; i++) {
function xxx(i) {
setTimeout(function(){
console.log(i);
}, 0)
}
xxx(i);
}
console.log("先执行:");
console.log(i);
console.log("然后执行:");
</script>
</head>
<body>
</body>
</html>
js-location解析网址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let url = window.location.href ;
console.log(url)
console.log(location.protocol);
console.log(location.hostname);
console.log(location.port);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
function goBaidu(){
window.location.assign("https://www.bilibili.com/video/BV1GJ411x7h7/?spm_id_from=333.788.recommend_more_video.0")
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="goBaidu()">美女劲图</a>
</body>
</html>
js-dom-选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p class="p1 icon">hello</p>
<p class="p1">world</p>
<p name="xxx" class="p2">over!!</p>
</div>
<script>
let tag = document.getElementById("app");
console.log(tag)
let tags = document.getElementsByTagName("div")
console.log(tags)
let tags2 = document.getElementsByClassName("p1")
console.log(tags2)
</script>
</body>
</html>
js-dom元素操作标签体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p class="p1"><a href="#hello">hello</a></p>
<p class="p1">world</p>
</div>
<script>
let tags = document.getElementsByClassName("p1");
console.log(tags);
for(let tag of tags) {
tag.innerHTML = "<b>我是动态的数据</b>"
tag.innerText = "<b>我是动态的数据</b>"
}
</script>
</body>
</html>
js-dom操作标签中的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showText(tag) {
console.log(tag.value);
}
</script>
</head>
<body>
<!--自定义属性 xx -->
<div id="app" xx="tt">
<p class="p1"><a href="#hello">hello</a></p>
<p class="p1">world</p>
<!--
输入框比较常用的事件 是 onchange(值改变且失去焦点)
this 代表 当前事件 所在的 dom元素
-->
<input type="text" onchange="showText(this)" />
</div>
<script>
let tag = document.getElementById("app") ;
console.log(tag.getAttribute("xx"));
tag.setAttribute("yyyyy", "xxxx")
tag.removeAttribute("id")
</script>
</body>
</html>
js-dom-操作 class样式 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#star {
width: 600px;
height:40px;
margin: 100px auto 0 ;
font-size:28px;
}
.cur {
color: #f00;
}
</style>
</head>
<body>
<div id="star">
<span class="cur">♥</span>
<span class="a">♥</span>
<span class="a">♥</span>
<span class="a">♥</span>
<span class="a">♥</span>
</div>
<script>
let spans = document.querySelectorAll("#star span") ;
for(let i=0 ; i< spans.length; i++) {
let tag = spans[i] ;
tag.addEventListener("mouseenter", function(){
tag.classList.add("cur")
})
tag.addEventListener("mouseleave", function(){
tag.classList.remove("cur")
})
}
</script>
</body>
</html>
js-dom-操作 class样式 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#star {
width: 600px;
height:40px;
margin: 100px auto 0 ;
font-size:28px;
}
</style>
</head>
<body>
<div id="star">
<span>♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
</div>
<script>
let spans = document.querySelectorAll("#star span") ;
for(let i=0 ; i< spans.length; i++) {
let tag = spans[i] ;
tag.addEventListener("mouseenter", function(){
tag.style.color = "#f00"
tag.style.backgroundColor = "#00f"
})
tag.addEventListener("mouseleave", function(){
console.log("----")
this.removeAttribute("style")
})
}
</script>
</body>
</html>
js-dom-元素与元素之间的关系的获取方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<b>test</b>
<p><a href="#">百度</a></p>
<p>你好,世界</p>
</div>
<script>
let div = document.querySelector("#app")
console.log(div.children);
let p = document.querySelector("#app p:nth-child(2)")
console.log(p);
console.log(p.parentNode);
console.log(p.previousElementSibling);
console.log(p.nextElementSibling);
</script>
</body>
</html>
js-dom-元素位置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
position: relative;
width: 100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
let tag = document.querySelector("#app");
console.log(tag.offsetLeft);
</script>
</body>
</html>
js-dom-鼠标跟随效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {margin:0 ; padding:0}
</style>
</head>
<body>
</body>
<script src="commons.js"></script>
<script>
document.addEventListener("mousemove", function(event) {
let dots = document.createElement("div");
let width = Math.floor(Math.random() * 15 + 10 )
let height = width ;
dots.style.position = "absolute";
dots.style.width = `${width}px`;
dots.style.height = `${height}px`;
dots.style.backgroundColor = randomRgb();
dots.style.left = event.pageX - width/2 + "px" ;
dots.style.top = event.pageY - height/2 + "px" ;
dots.style.borderRadius = "50%" ;
dots.style.opacity = Math.random() ;
console.log(dots)
console.log(dots.style.width)
document.body.append(dots)
setTimeout(function(){
dots.remove();
}, 200)
});
</script>
</html>
JS文件 日期格式化:
Date.prototype.format = function (pattern = "yyyy-MM-dd HH:mm:ss") {
let year = this.getFullYear() + "";
let month = this.getMonth() + 1 < 10 ? "0" + (this.getMonth() + 1) : this.getMonth() + 1;
let date = this.getDate() < 10 ? "0" + this.getDate() : this.getDate();
let hour = this.getHours() < 10 ? "0" + this.getHours() : this.getHours();
let min = this.getMinutes() < 10 ? "0" + this.getMinutes() : this.getMinutes();
let sec = this.getSeconds() < 10 ? "0" + this.getSeconds() : this.getSeconds();
let mill = (this.getMilliseconds() + "").padStart(3, "0");
let weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
let week = weekArray[this.getDay()];
return pattern.replace("yyyy", year)
.replace("MM", month)
.replace("dd", date)
.replace("HH", hour)
.replace("hh", hour > 12 ? hour - 12 : hour)
.replace("mm", min)
.replace("ss", sec)
.replace("SSS", mill)
.replace("E", week)
}
function getClientPos(target) {
let left = 0, tops = 0;
while (target.offsetParent) {
left += target.offsetLeft + target.offsetParent.clientLeft;
tops += target.offsetTop + target.offsetParent.clientTop;
target = target.offsetParent;
}
return {left, tops}
}
function randomRgb() {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r}, ${g}, ${b})`
}