实现功能
网页代码
<html>
<head>
<meta charset="utf-8">
<title>动态网页</title>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
// Set the date we're counting down to
var countDownDate = new Date("Jul 2, 2018 10:30:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "天" + hours + "小时"
+ minutes + "分钟" + seconds + "秒";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;//绝对定位元素，相对浏览器窗口定位
z-index: 1;//堆叠顺序
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;//改变时间
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.time {
text-align: center;
font-size: 60px;
color:#81818181;
transition:0.3s;
}
.time:hover{
color:#ff0000ff;
}
.title{
text-align:center;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href=http://www.baidu.com>百度</a>
<a href=https://www.taobao.com>淘宝</a>
<a href=http://4m3.tongji.edu.cn>4m3</a>
<a href=http://xuanke.tongji.edu.cn>选课网</a>
</div>
<div id="main">
<h3 class="title">“一个很low的网站”
</br>
你可以从中：
</br>
1.进入常用网址
</br>
2.提醒考试时间
</br>
3.sorry 没了
</h3>
<h1>同济大学学生专用</h1>
<h2>!点击下方按钮快速进入网站链接！</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ 打开</span>
<br>
<br>
<div class="time">
<p>距离期末考试第一科还有:</p>
<p id="demo"></p>
</div>
</div>
</body>
</html>
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
