初学自建的超简单网站
生活随笔
收集整理的這篇文章主要介紹了
初学自建的超简单网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現功能
- 文字顯示
- 修改文字格式
- 添加索引
- 動態網頁交互
- 計時器
?
網頁代碼
<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 timevar now = new Date().getTime();// Find the distance between now an the count down datevar distance = countDownDate - now;// Time calculations for days, hours, minutes and secondsvar 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>?
總結
以上是生活随笔為你收集整理的初学自建的超简单网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简谈 Xilinx FPGA 原理及结构
- 下一篇： 云南大学计算机科学与技术录取分数线,云南