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' 类
}
四、整体效果
五、源码获取
看到这里你是否受益了呢?你的支持就是我创作的动力,点赞+收藏+关注,学习不迷路,评论区留下你的疑问,可私信获取源码。
Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码Web网页制作之JavaScript的应用 Web网页制作之JavaScript的应用源码