pa29ybkht
/
SampleQuestionOne
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

在每个页面加入进度条和DOM加载功能

Browse Source
main
AviderMin 3 weeks ago
parent baf744b33d
commit 4ef0c37f87
7 changed files with 98 additions and 2 deletions
Show Stats Download Patch File Download Diff File

16
WebNews/css/foucsreport.css
Unescape View File

@ -6,12 +6,28 @@ a{
text-decoration: none; text-decoration: none;
} }
.Progress {
width: 100%;
padding: 0;
margin: 0;
position: fixed;
top: 0px;
z-index: 1000;
}
.Prostick {
width: 0;
background-color: #0091EA;
height: 5px;
}
.navbar{ .navbar{
width: 100%; width: 100%;
height: 65px; height: 65px;
position: fixed; position: fixed;
background-color: lightgray; background-color: lightgray;
top: 0; top: 0;
box-shadow: 0px 6px 5px rgb(179, 175, 175);
} }
.navinit{ .navinit{
width: 980px; width: 980px;

18
WebNews/css/newsclass.css
Unescape View File

@ -6,12 +6,30 @@ a{
text-decoration: none; text-decoration: none;
} }
.Progress {
width: 100%;
padding: 0;
margin: 0;
position: fixed;
top: 0px;
z-index: 1000;
}
.Prostick {
width: 0;
background-color: #0091EA;
height: 5px;
}
.navbar{ .navbar{
width: 100%; width: 100%;
height: 65px; height: 65px;
position: fixed; position: fixed;
background-color: lightgray; background-color: lightgray;
top: 0; top: 0;
box-shadow: 0px 6px 5px rgb(179, 175, 175);
} }
.navinit{ .navinit{
width: 980px; width: 980px;

16
WebNews/css/newsinfo.css
Unescape View File

@ -6,12 +6,28 @@ a{
text-decoration: none; text-decoration: none;
} }
.Progress {
width: 100%;
padding: 0;
margin: 0;
position: fixed;
top: 0px;
z-index: 1000;
}
.Prostick {
width: 0;
background-color: #0091EA;
height: 5px;
}
.navbar{ .navbar{
width: 100%; width: 100%;
height: 65px; height: 65px;
position: fixed; position: fixed;
background-color: lightgray; background-color: lightgray;
top: 0; top: 0;
box-shadow: 0px 6px 5px rgb(179, 175, 175);
} }
.navinit{ .navinit{
width: 980px; width: 980px;

16
WebNews/foucsreport.html
Unescape View File

@ -8,6 +8,9 @@
<link rel="stylesheet" href="css/foucsreport.css"> <link rel="stylesheet" href="css/foucsreport.css">
</head> </head>
<body> <body>
<div class="Progress">
<div class="Prostick"></div>
</div>
<div class="navbar"> <div class="navbar">
<div class="navinit"> <div class="navinit">
<div class="logo">web新闻网站</div> <div class="logo">web新闻网站</div>
@ -60,5 +63,18 @@
</div> </div>
<div class="footer">web新闻网站</div> <div class="footer">web新闻网站</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
totalHight = document.body.scrollHeight - window.innerHeight;
});
const Prostick = document.querySelector('.Prostick')
window.addEventListener('scroll', function () {
let pro = (window.pageYOffset / totalHight) * 100;
Prostick.style.width = pro + '%';
})
</script>
</body> </body>
</html> </html>

2
WebNews/index.html
Unescape View File

@ -45,8 +45,6 @@
</div> </div>
<div class="footer">web新闻网站</div> <div class="footer">web新闻网站</div>
<script> <script>
// let totalHight = document.body.scrollHeight - window.innerHeight
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
let imgs = []; let imgs = [];
const carouselImages = document.querySelector('.banner img'); const carouselImages = document.querySelector('.banner img');

16
WebNews/newsclass.html
Unescape View File

@ -8,6 +8,9 @@
<link rel="stylesheet" href="css/newsclass.css"> <link rel="stylesheet" href="css/newsclass.css">
</head> </head>
<body> <body>
<div class="Progress">
<div class="Prostick"></div>
</div>
<div class="navbar"> <div class="navbar">
<div class="navinit"> <div class="navinit">
<div class="logo">web新闻网站</div> <div class="logo">web新闻网站</div>
@ -43,5 +46,18 @@
</div> </div>
</div> </div>
<div class="footer">web新闻网站</div> <div class="footer">web新闻网站</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
totalHight = document.body.scrollHeight - window.innerHeight;
});
const Prostick = document.querySelector('.Prostick')
window.addEventListener('scroll', function () {
let pro = (window.pageYOffset / totalHight) * 100;
Prostick.style.width = pro + '%';
})
</script>
</body> </body>
</html> </html>

16
WebNews/newsinfo.html
Unescape View File

@ -8,6 +8,9 @@
<link rel="stylesheet" href="css/newsinfo.css"> <link rel="stylesheet" href="css/newsinfo.css">
</head> </head>
<body> <body>
<div class="Progress">
<div class="Prostick"></div>
</div>
<div class="navbar"> <div class="navbar">
<div class="navinit"> <div class="navinit">
<div class="logo">web新闻网站</div> <div class="logo">web新闻网站</div>
@ -23,5 +26,18 @@
<div class="searchbox"></div> <div class="searchbox"></div>
<div class="searchicon"></div> <div class="searchicon"></div>
<div class="footer">web新闻网站</div> <div class="footer">web新闻网站</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
totalHight = document.body.scrollHeight - window.innerHeight;
});
const Prostick = document.querySelector('.Prostick')
window.addEventListener('scroll', function () {
let pro = (window.pageYOffset / totalHight) * 100;
Prostick.style.width = pro + '%';
})
</script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save