Web网页制作之JavaScript的应用

htmledit_views">

---------------📡🔍K学啦更多学习资料📕 免费获取---------------

实现的功能：1.通过登录界面跳转至主页面，用户名统一为“admin”，密码统一为“admin123”，密码可显示或隐藏，输入错误有提示信息。可通过enter键，进行登录跳转。

2.登录界面的登录框为模态框，可通过鼠标拖拽移动。

3.主页面中包含横向或竖向导航菜单，可通过鼠标事件使选中菜单变色，并调出二级菜单。主页面内可实时显示当前时间；主页面可修改主页背景颜色或背景图片；主页面内使用轮播图滚动播放信息；在主页中实现tab栏的切换，不跳转页面控制内容的呈现。固定主页面导航栏。

一、网页的基本结构

二、登录页面的功能实现

三、主页的功能实现

四、整体效果

五、源码获取

一、网页的基本结构

html"><!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>

二、登录页面的功能实现

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代码：

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代码：

html" title=javascript>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代码：

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代码：

html" title=javascript>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代码：

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代码：

html" title=javascript>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' 类
}