The preview image is shown above, and the code I wrote is shared below:
data.html
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h2>前端练习</h2>
<div class="box">
<ul>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
<button>发送验证码</button>
</div>
<div class="show">
<div class="sBox">
<img id="small" src="../Pictures/phone.jpg" alt="">
<div class="box2">
</div>
</div>
<div class="sBox2">
<img id="big" src="../Pictures/phone.jpg" alt="">
</div>
</div>
<script src="control.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
display: inline-block;
height: 100px;
width: 300px;
overflow: hidden;
}
.box ul li{
float: left;
display: block;
color: white;
font-weight: 700;
font-size: larger;
background-color: gray;
border: 1px solid black;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
}
.show {
border: 1px solid black;
}
.box2 {
display: none;
position: absolute;
height: 200px;
width: 200px;
background-color: rgb(8, 245, 245,0.6);
pointer-events: none;
transform: translate(-50%,-50%);
}
.sBox {
display: block;
height: 500px;
width: 389px;
margin-left: 50px;
background-color: aqua;
overflow: hidden;
}
.show #small{
height: 500px;
border: 1px solid blue;
overflow: hidden;
}
.show #big{
display: block;
position: absolute;
height: 1250px;
top:0;
border: 1px solid red;
left: 0;
}
.sBox2 {
display: block;
position: absolute;
margin-left: 0;
top: 135px;
left: 440px;
height: 500px;
width: 500px;
overflow: hidden;
border: 1px solid blue;
}
control.js
var target1={
id:0,
msg:{
sex:"男"
}
};var target2={
id:0,
msg:{
sex:"男"
}
};
var obj={
id:1,
name:"zzy",
msg:{
age:22
}
}
//浅拷贝
$.extend(target1,obj);
obj.msg.age=20;
console.log("target1",target1);
console.log(obj);
//深拷贝
$.extend(true,target2,obj);
obj.msg.age=22;
console.log("target2",target2);
console.log(obj);
function showRight(num){
num=parseInt(num);
if(num<10){
return String(num)+'0';
}else{
return String(num);
}
}
var targetTime=new Date('2024-02-24 17:30:00');
function countTImeDown(){
let nowTime=new Date();
let diffTime=(targetTime-nowTime)/1000;
let hour=(diffTime/(3600))%24;
let minute=(diffTime/(60))%60;
let second=(diffTime%(60));
$(".box li").eq(0).text(showRight(hour));
$(".box li").eq(1).text(showRight(minute));
$(".box li").eq(2).text(parseInt(second));
}
//定时之前调用一次防止刷新后出现默认显示
countTImeDown();
var time1=setInterval(countTImeDown,1000);
var now=new Date();
if(new Date()>targetTime){
clearInterval(time1);
alert("倒计时结束！")
}
var time2=10;
$(".box button").on("click",function(){
$(".box2").show();
$(this).attr("disabled",true);
let time=setInterval(function(){
if(time2==0){
$(".box button").attr("disabled",false);
$(".box button").text("发送验证码");
clearInterval(time);
time2=10;
}else{
$(".box button").text("还剩"+(time2--)+"秒");
}
},1000);
})
window.addEventListener('load',function(){
$(".show img").hover(function () {
// over
$(".box2").show();
$(".sBox2").show();
}, function () {
// out
$(".box2").hide();
$(".sBox2").hide();
}
);
$("#small").mousemove(function (e) {
// values: e.clientX, e.clientY, e.pageX, e.pageY
var xL=e.pageX-$(this).offset().left;
var yL=e.pageY-$(this).offset().top;
// console.log(xL+"and"+yL);
if(xL<=100){
xL=100;
}
if(xL>292){
xL=292;
}
if(yL<-404+500){
yL=-404+500;
}
if(yL>-104+500){
yL=-104+500;
}
$(".box2").css({
"margin-left":xL+'px',
"margin-top":yL-500+'px'
})
$(".show #big").css({
/* "left":-xL*1.5+100+'px',
"top":-yL*2.0+100+'px' */
"left":-xL*2.5+260+'px',
"top":-(yL-500)*2.5-1010+'px'
})
// console.log(xL+"and"+(yL-500));
});
})
Picture material:
