js+css实现盒子垂直居中里面有一个定时器可以对他提前或延迟一小时
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a div {
border: 1px solid red;
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="a">
<div>
</div>
<button class="b">提前 </button>
<button class="c">延迟 </button>
</div>
</body>
<script type="text/javascript">
var count = 0;
var b = document.querySelector('.a div');
setInterval('getTime()', 1000);
function getTime() {
var mydate = new Date;
var mytime = mydate.getTime() + count * 1000 * 60 * 60;
b.innerText = new Date(mytime);
}
document.querySelector('.b').addEventListener('click', function() {
count++;
console.log(count,'提前');
});
document.querySelector('.c').addEventListener('click', function() {
count--;
console.log(count,'延迟');
});
</script>
</html>