1- history
<button>按钮</button>
<button>回退上一历史</button>
<button>go到下一个历史</button>
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
<a href="4.html">4</a>
<script>
var button = document.querySelectorAll("button")[0];
button.onclick = function(){
// 获取历史记录的长度
console.log(history.length);
}
var btn = document.querySelectorAll("button")[1];
btn.onclick = function(){
history.back();
console.log("回退上一历史");
}
var btn1 = document.querySelectorAll("button")[2];
btn1.onclick = function(){
history.go(1);
console.log("前进到上一个历史");
}history.back();回退一步
history.go(1);前进一步
history.forward();前进一步
2- 定时器
定时器
setTimeout(function(){
},7000);循环定时器(不会停止)
setInterval(function(){
},3000)3- 时间显示
写一个功能去解析当前时间--利用循环定时器不停调用==>从而实时显示到h2上
function fn(date){
//写一个数组遍历获取星期
var dayArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
//获取年
var y = date.getFullYear();
//获取月(月从0开始，所以要加1)
var m = date.getMonth()+1;
//获取天(日)
var n = date.getDate();
//获取小时
var q = date.getHours();
q = q<10?"0"+q:q;
var mm = date.getMinutes();
mm = mm<10?"0"+mm:mm;
//getDay()获取的是星期几
var day = date.getDay();
var s = date.getSeconds();
s= s<10?"0"+s:s;
// console.log(y,m,n,h,mm,s);
var str = y+"年"+m+"月"+n+"日"+dayArr[day]+"-"+q+":"+mm+":"+s;
h2.innerHTML = str;
// console.log(str);
}fn(new Date();调用该方法，并放入循环定时器中👇
setInterval(function(){
function fn(date){
var dayArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var y = date.getFullYear();
var m = date.getMonth()+1;
var n = date.getDate();
var q = date.getHours();
q = q<10?"0"+q:q;
var mm = date.getMinutes();
mm = mm<10?"0"+mm:mm;
var day = date.getDay();
// console.log(day);
var s = date.getSeconds();
s= s<10?"0"+s:s;
// console.log(y,m,n,h,mm,s);
var str = y+"年"+m+"月"+n+"日"+dayArr[day]+"-"+q+":"+mm+":"+s;
h2.innerHTML = str;
// console.log(str);
}
fn(new Date());
})4-广告关闭
需求：
<!-- 1、打开网页3秒后弹出广告 -->
<!-- 2、广告位置随机一点 -->
<!-- 3、观看5s后可以关闭 -->
<!-- 4、点击关闭后，3s之后关闭广告 -->
==============================================================
<!-- 1、打开网页3秒后弹出广告 -->
// <!-- 1、打开网页3秒后弹出广告 -->
setTimeout(function () {
// 广告随机出现的位置坐标
// <!-- 2、广告位置随机一点 -->
var x = parseInt(Math.random() * 1000);
var y = parseInt(Math.random() * 800);
// 给广告元素添加边偏移
div.style.left = x + "px";
div.style.top = y + "px";
// 显示广告
div.style.display = "block";
// 定义s=5就是设置倒计时的时间
var s = 5;
// <!-- 3、观看5s后可以关闭 -->
// 开始倒计时,倒计时结束后激活按钮
var timer = setInterval(function () {
// 每次执行定时器要减掉1秒
s--;
// 同步把秒数更新到按钮的文字上
btn.innerText = "关闭(" + s + "s" + ")";
// 判断倒计时是否结束
if (s <= 0) {
// 激活按钮
btn.disabled = false;
// 清除定时器==>循环定时器清除
clearInterval(timer);
// 更新按钮文字为"关闭""
btn.innerText = "关闭";
// 更新按钮样式
btn.className = ".gengxin";
}
}, 1000)
}, 3000)<!-- 2、广告位置随机一点 -->
// <!-- 2、广告位置随机一点 -->
var x = parseInt(Math.random() * 1000);
var y = parseInt(Math.random() * 800);
// 给广告元素添加边偏移
div.style.left = x + "px";
div.style.top = y + "px";
// 显示广告
div.style.display = "block";<!-- 3、观看5s后可以关闭 -->
// 定义s=5就是设置倒计时的时间
var s = 5;
// <!-- 3、观看5s后可以关闭 -->
// 开始倒计时,倒计时结束后激活按钮
var timer = setInterval(function () {
// 每次执行定时器要减掉1秒
s--;
// 同步把秒数更新到按钮的文字上
btn.innerText = "关闭(" + s + "s" + ")";
// 判断倒计时是否结束
if (s <= 0) {
// 激活按钮
btn.disabled = false;
// 清除定时器==>循环定时器清除
clearInterval(timer);
// 更新按钮文字为"关闭""
btn.innerText = "关闭";
// 更新按钮样式
btn.className = ".gengxin";
}
}, 1000)<!-- 4、点击关闭后，3s之后关闭广告 -->
// 按钮点击后的功能代码
btn.onclick = function () {
// 当点击按钮后,应该立即禁用按钮,防止二次点击
btn.disabled = true;
// 定义s=5就是设置倒计时的时间
var s = 5;
// 更新按钮文字为"5s后自动关闭""
btn.innerText = s + "后自动关闭";
// 开始倒计时
var timer = setInterval(function () {
// 每次执行定时器要减掉1秒
// s--就是s先参加其他运算,然后自身减1
s--;
console.log(s);
// 判断倒计时是否结束
if (s <= 0) {
// 结束时清除定时器
clearInterval(timer);
// 最后隐藏广告
div.style.display = "none";
}
// 如果没有结束则更新文字
btn.innerText = s + "后自动关闭";
}, 1000)
}5- window.οnlοad=function(){}
window.onload的用法：
该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。
因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。
所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。
6-计算与目标日期相差的时间
逻辑：
1->获取当前时间并切换成毫秒值var nowTime = (new Date()).valueOf();
2->获取目标时间并切换成毫秒值var targetTime = (new Date("2024-02-09 00:00:00")).valueOf();
3->相差时间为time = targetTime-nowTime
var day = parseInt(time/1000/60/60/24);
var h = parseInt(time/1000/60/60%24);
var m = parseInt(time/1000/60%60);
var s = parseInt(time/1000%60);span.innerText = day + "天" +h + "小时" + m + "分" + s + "秒";7- offset
<div class="a">
<div class="b">
</div>
</div>
//父元素有定位就是相对父元素的位置，没有定位就是在整个界面中的位置
console.log(div2.offsetLeft);
console.log(div2.offsetTop);
// 父元素没有定位就是body，有就是距离最近的有定位的元素
console.log(div2.offsetParent);案例5：放大镜（鼠标移入广告图后放大）
逻辑需求：
设置3个div分别放置原图（outBox），鼠标移入后的区域框（moveBox），以及放大后的区域（bigBox）。
鼠标移入outBox 显示 moveBox 与bigBox；鼠标移出outBox 隐藏 moveBox 与 bigBox。且在鼠标移入moveBox后让moveBox在盒子内跟随鼠标。
计算鼠标在盒子中的位置，使用 var x = event.pageX - outBox.offsetLeft;
var y = event.pageY - outBox.offsetTop;
同时还要计算边界值，不让moveBox预览框溢出。
设置放大图片的移动比例，在预览框移动时，放大的图片按反方向移动显示
==============================================================
<!-- 1、鼠标移入outBox 显示 moveBox 与bigBox -->
outBox.onmouseenter = function(){
moveBox.style.display = "block";
bigBox.style.display = "block";
}<!-- 2、鼠标移出outBox 隐藏 moveBox 与bigBox -->
outBox.onmouseleave = function(){
moveBox.style.display = "none";
bigBox.style.display = "none";
}<!-- 3、让moveBox在盒子内跟随鼠标，并显示放大图 -->
outBox.onmousemove = function(){
// console.log(event);
// 计算鼠标在盒子中的位置
var x = event.pageX - outBox.offsetLeft;
var y = event.pageY - outBox.offsetTop;
// console.log(x,y);
// 计算moveBox在盒子内的位置
// 计算边界值，不让黄色预览框溢出
var moveX = x - moveBox.offsetWidth/2;
var moveY = y - moveBox.offsetHeight/2;
if(moveX<0){
moveX=0;
}
else if (moveX >outBox.offsetWidth - moveBox.offsetWidth){
moveX = outBox.offsetWidth - moveBox.offsetWidth;
}
if(moveY<0){
moveY=0;
}
else if(moveY>outBox.offsetHeight -moveBox.offsetHeight){
moveY=outBox.offsetHeight -moveBox.offsetHeight;
}
moveBox.style.left =moveX + "px";
moveBox.style.top =moveY + "px";
// 比例
// 大图片(800) - 大图片所在的盒子(500) / 预览框(400) - 鼠标移入时的透明盒子(300)
var bili = (img.offsetHeight-bigBox.offsetHeight)/(outBox.offsetHeight-moveBox.offsetHeight);
// 移动图片
img.style.left = -moveX*bili +"px";
img.style.top = -moveY*bili +"px";
}
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
