Web网页制作之JavaScript的应用
---------------📡🔍K学啦 更多学习资料📕 免费获取---------------
实现的功能：1.通过登录界面跳转至主页面，用户名统一为“admin”，密码统一为“admin123”，密码可显示或隐藏，输入错误有提示信息。可通过enter键，进行登录跳转。
2.登录界面的登录框为模态框，可通过鼠标拖拽移动。
3.主页面中包含横向或竖向导航菜单，可通过鼠标事件使选中菜单变色，并调出二级菜单。主页面内可实时显示当前时间；主页面可修改主页背景颜色或背景图片；主页面内使用轮播图滚动播放信息；在主页中实现tab栏的切换，不跳转页面控制内容的呈现。固定主页面导航栏。
目录
一、网页的基本结构
二、登录页面的功能实现
三、主页的功能实现
四、整体效果
五、源码获取
一、网页的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=" " content=" ">
<link rel="icon" href="../img/logo.jpg">-----//网页logo
<title>猿来如此</title>--------//网页标题
<style> ...
............//位置，大小，颜色，形状
</style>
</head>-------------//头部
<body>-----------//主体
<header>
<nav class=" ">------//导航栏菜单
<ul class=" ">
<li class="menu-item" onclick="showSubMenu('menu1')">微信小程序</li>
<li class="menu-item" onclick="showSubMenu('menu2')">搜</li>
<li class="menu-item" onclick="showSubMenu('menu3')">K学啦</li>
</ul>
<div id="menu1" class="sub-menu">------//子菜单
<a href="#">小程序</a>
<a href="#">K学啦</a>
</div>
<div id="menu2" class="sub-menu">
<a href="#">私信</a>
<a href="#">评论区</a>
</div>
<div id="menu3" class="sub-menu">
<a href="#">注销</a>
<a href="#">退出</a>
</div>
</nav>
</header>
<div class=" " id=" "> ...
.........
</div>
<div class=" " id=" "> ...
.........
</div>
<script> ...
...........//js部分
</script>
<footer class=" ">
<p>©版权信息</p>
</footer>
</body>
</html>二、登录页面的功能实现
<body>
<div class="overlay" id="overlay">
<div class="modal" id="modal">
<div class="modal-header" id="modalHeader">
<h2>Login</h2> ------//二级标题
</div>
<div class="modal-content">
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button onclick="login()">登录</button>---//登录事件
<input type="checkbox" id="showPassword" onclick="togglePassword()">展示密码
<div class="error-message" id="errorMessage">用户名或密码不正确</div>
</div>
</div>
</div>
<div class="overlay" id="overlay">
<div class="modal" id="modal">
<div class="modal-header" id="modalHeader">
<h2>Login</h2>
</div>
<div class="modal-content">
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button onclick="login()">登录</button>
<input type="checkbox" id="showPassword" onclick="togglePassword()">展示密码
<div class="error-message" id="errorMessage">用户名或密码不正确</div>
</div>
</div>
</div>
<script>
const username = 'admin'; ------固定用户名
const password = 'admin123'; ------固定密码
document.getElementById('password').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
login();
}
}); ----------------Enter触发登录事件
function login() {
const userInputUsername = document.getElementById('username').value;
const userInputPassword = document.getElementById('password').value;
if (userInputUsername === username && userInputPassword === password) {
window.location.href = 'main.html'; ------//用户输入用户名密码和固定的相等时跳转到main.html
} else {
document.getElementById('errorMessage').style.display = 'block';
}
} ---------------//否则触发errorMessage事件报错
function togglePassword() {
const passwordField = document.getElementById('password');
const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
passwordField.setAttribute('type', type);
} ------------//展示密码功能
//拖拽功能
let modal = document.getElementById('modal');
let modalHeader = document.getElementById('modalHeader');
let isDragging = false;
let offsetX, offsetY;
modalHeader.onmousedown = dragMouseDown;
function dragMouseDown(e) {
isDragging = true;
modal.style.cursor = 'grabbing';
offsetX = e.clientX - modal.getBoundingClientRect().left;
offsetY = e.clientY - modal.getBoundingClientRect().top;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if (isDragging) {
modal.style.left = `${e.clientX - offsetX}px`;
modal.style.top = `${e.clientY - offsetY}px`;
}
}
function closeDragElement() {
isDragging = false;
modal.style.cursor = 'grab';
document.onmouseup = null;
document.onmousemove = null;
}
document.getElementById('overlay').style.display = 'flex';
</script>
</body>
三、主页的功能实现
①主页面中包含横向或竖向导航菜单，可通过鼠标事件使选中菜单变色，并调出二级菜单，并显示当前时间。
HTML代码：
<header>
<nav class="navbar">
<ul class="menu">
<li class="menu-item" onclick="showSubMenu('menu1')">微信</li>
<li class="menu-item" onclick="showSubMenu('menu2')">源码获取</li>
<li class="menu-item" onclick="showSubMenu('menu3')">退出</li>
</ul>
<div id="menu1" class="sub-menu">
<a href="#">小程序</a>------//如，href="1.html",跳转到1.html
<a href="#">K学啦</a>
</div>
<div id="menu2" class="sub-menu">
<a href="#">私信</a>
<a href="#">评论区</a>
</div>
<div id="menu3" class="sub-menu">
<a href="#">注销</a>
<a href="#">退出</a>
</div>
</nav>
<div class="time-display" id="timeDisplay"></div>
</header>JavaScript代码：
document.addEventListener('DOMContentLoaded', () => {
const timeDisplay = document.getElementById('timeDisplay');
setInterval(() => {
const now = new Date();
timeDisplay.textContent = now.toLocaleTimeString();
}, 1000);
const carouselImages = document.querySelector('.carousel-images');
let carouselIndex = 0;
const images = document.querySelectorAll('.carousel-images img');
const totalImages = images.length;
setInterval(() => {
carouselIndex = (carouselIndex + 1) % totalImages;
const offset = -carouselIndex * 100 + '%';
carouselImages.style.transform = `translateX(${offset})`;
}, 3000);
});---------//显示当时时间
function showSubMenu(menuId) {
const menus = document.querySelectorAll('.sub-menu');
menus.forEach(menu => menu.style.display = 'none');
document.getElementById(menuId).style.display = 'block'; -----//鼠标活动变色
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => item.classList.remove('active'));
document.querySelector(`.menu-item[onclick="showSubMenu('${menuId}')"]`).classList.add('active');
}-------//活动菜单栏
②主页面可修改主页背景颜色或背景图片；主页面内使用轮播图滚动播放信息。
HTML代码：
<div class="background-controls">
<label for="bgColor">背景颜色:</label>
<input type="color" id="bgColor" onchange="changeBackgroundColor(this.value)">
<label for="bgImage">背景图片:</label>
<input type="file" id="bgImage" accept="image/*" onchange="changeBackgroundImage(this.files[0])">------//选择本地图片
</div>
<div class=" ">-------//轮播图
<div class=" ">
<img src="1.jpg" alt="Image 1">
<img src="2.png" alt="Image 2">
<img src="5.jpg" alt="Image 3">
</div>
</div>JavaScript代码：
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
function changeBackgroundImage(file) {
const reader = new FileReader();
reader.onload = function(e) {
document.body.style.backgroundImage = `url(${e.target.result})`;
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center';
};
reader.readAsDataURL(file);
}
③在主页中实现tab栏的切换，不跳转页面控制内容的呈现。固定主页面导航栏。
HTML代码：
<div class="tabs">
<div class="tab-buttons">
<button class="tab-button" onclick="showTab('tab1')">C语言</button>
<button class="tab-button" onclick="showTab('tab2')">python语言</button>
<button class="tab-button" onclick="showTab('tab3')">JAVA语言</button>
</div>
<div id="tab1" class="tab-content">
<p>C语言是一种较早的程序设计语言，诞生于1972年的贝尔实验室。
1972 年，Dennis Ritchie 设计了C语言，它继承了B语言的许多思想，并加入了数据类型的概念及其他特性。
尽管C 语言是与 UNIX 操作系统一起被开发出来的，但它不只支持UNIX。C是一种通用（广泛可用）的编程语言。</p>
</div>
<div id="tab2" class="tab-content">
<p>Python由荷兰国家数学与计算机科学研究中心的吉多·范罗苏姆于1990年代初设计，
作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构，还能简单有效地面
向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的编程语言，
随着版本的不断更新和语言新功能的添加，逐渐被用于独立的、大型项目的开发。</p>
</div>
<div id="tab3" class="tab-content">
<p>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难
以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面
向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。</p>
</div>
</div>JavaScript代码：
function showTab(tabId) {
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active')); // 移除所有标签的 'active' 类
document.getElementById(tabId).classList.add('active'); // 为指定的标签添加 'active' 类
}
四、整体效果
五、源码获取
看到这里你是否受益了呢？你的支持就是我创作的动力，点赞+收藏+关注，学习不迷路，评论区留下你的疑问，可私信获取源码。