Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码

 ---------------??K学啦 更多学习资料? 免费获取---------------


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

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

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

目录

一、网页的基本结构 

二、登录页面的功能实现

三、主页的功能实现 

四、整体效果 

五、源码获取 


一、网页的基本结构 


 
 
 -----//网页logo
 猿来如此--------//网页标题
 ...
 ............//位置,大小,颜色,形状
 
-------------//头部
-----------//主体
 
 ------//导航栏菜单
 
 微信小程序
 搜
 K学啦
 
 ------//子菜单
 小程序
 K学啦
 
 
 私信
 评论区
 
 
 注销
 退出
 
 
 
 ...
 .........
 
 ...
 .........
 
 ...
 ...........//js部分
 
 
 ©版权信息
 

二、登录页面的功能实现


 
 
 
 Login ------//二级标题
 
 
 
 
 登录---//登录事件
 展示密码
 用户名或密码不正确
 
 
 
 
 
 
 Login
 
 
 
 
 登录
 展示密码
 用户名或密码不正确
 
 
 
 
 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';
 

三、主页的功能实现 

 ①主页面中包含横向或竖向导航菜单,可通过鼠标事件使选中菜单变色,并调出二级菜单,并显示当前时间。

HTML代码: 


 
 
 微信
 源码获取
 退出
 
 
 小程序------//如,href="1.html",跳转到1.html
 K学啦
 
 
 私信
 评论区
 
 
 注销
 退出
 
 
 
 

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


 背景颜色:
 
 背景图片:
 ------//选择本地图片
 
 -------//轮播图
 
 
 
 
 
 

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


 
 C语言
 python语言
 JAVA语言
 
 
 C语言是一种较早的程序设计语言,诞生于1972年的贝尔实验室。
 1972 年,Dennis Ritchie 设计了C语言,它继承了B语言的许多思想,并加入了数据类型的概念及其他特性。
 尽管C 语言是与 UNIX 操作系统一起被开发出来的,但它不只支持UNIX。C是一种通用(广泛可用)的编程语言。
 
 
 Python由荷兰国家数学与计算机科学研究中心的吉多·范罗苏姆于1990年代初设计,
 作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构,还能简单有效地面
 向对象编程。Python语法和动态类型,以及解释型语言的本质,使它成为多数平台上写脚本和快速开发应用的编程语言,
 随着版本的不断更新和语言新功能的添加,逐渐被用于独立的、大型项目的开发。
 
 
 Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难
 以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面
 向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。
 

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' 类
}

四、整体效果 

五、源码获取 

  看到这里你是否受益了呢?你的支持就是我创作的动力,点赞+收藏+关注,学习不迷路,评论区留下你的疑问,可私信获取源码。

作者:@_猿来如此原文地址:https://blog.csdn.net/m0_63057469/article/details/144955244

%s 个评论

要回复文章请先登录注册