javascript网页设计期末作业 购物网站

article/2025/10/11 0:54:44

本次主要介绍下之前上传的作业的主要功能,网页下载地址:

网页设计期末作业 购物网站

如果对本文章内容还有疑问可以观看视频,也可以在评论区留言:

javascript 网页设计期末作业 购物网站

网页实现的主要功能有:

1.登录及验证 2.轮播图 3.下拉菜单 4.倒计时 5.tab栏 6.固定导航栏 7.留言板 8.购物车(包括商品的添加、删除、结算等) 9.退出登录

(其实大部分功能其实都集中在了主页_(:3」∠)_

首先是登录功能,在未登录状态下从任何网页启动都会跳转到登录页面,默认的登录账号和密码均为123456,有需要的话可以在“登录.html”文件中修改账号密码。

账号密码格式要求至少为6位,对于账号密码为空、少于6位、不正确的情况有三种不同的提示。

登录成功后会自动跳转至主页,这时如果关闭网页重启登录页面则会直接跳转到主页,无需再次登录,退出登录的方法后续会讲。

主页右上角的用户名会根据账号的变化而变化。

接下来讲一讲主页的功能。

首先是下拉菜单,当用户将鼠标移动至顶部菜单栏时,网页会动态显示下拉菜单,且下方会自动为下拉菜单腾出一定的空间。

 然后是精选推荐,单击精选推荐右侧的小图标可以切换大图的显示。

 

鼠标滑过底部的数字可以改变精选推荐的内容

 

 单击右侧的滚动播放按钮可以使推荐内容滚动播放,鼠标滑动至滚动播放的图片上后会自动停止滚动。

网页的特别优惠位置有一个倒计时,由于截止日期已过所以这个数字八成已经是负数了,截止时间可以在“主页.html”文件中修改(注意时间格式)

 

然后是tab栏,单击游戏分类处四个分类标签可以改变下方显示的内容

接下来是右侧的固定导航栏,点击导航栏上的不同标签可以跳转到相应位置。

 单击夜间模式按钮可以将主页颜色在白天模式和夜间模式之间切换(不过只能切换主页的)

 单击固定菜单或者主页顶部的购物车按钮可以切换到购物车页面,不过直接切换的话购物车里是没有东西的,需要先单击主页中的添加到购物车按钮进行添加。

 接下来说一说购物车页面,购物车页面中的总计和合计价格都是动态显示的(当时为了搞这个花了不少心思。。。),单击数量两侧的加减按钮可以选择购买份数,下方的总计价格会根据购买数量变化。

 下方的删除按钮是可以用的,不过删除后想要再次添加就得重新回到主页,单击确认购买右侧的方框会出现对号,而购物车页面最下方的合计就是所有带对号商品价格的总和,即最终需要支付的价格。

 点击支付按钮网页会跳出付款码,不过这个码其实是百度页面的码,并不能使用。

接下来说一说留言板页面,在主页的精选推荐中第二个推荐里有一个查看详情按钮,单击该按钮可以进入商品的详情页面。

在详情页面下方有一个留言板,在留言框内输入内容后单击右侧的发布留言按钮即可发布留言

发布后的留言会被保存在电脑后台,即使刷新页面也不会消失,不过可以单击留言右侧的删除按钮进行删除。

最后还有一个用来凑数的个人中心页面,单击主页右上角的用户名可以1跳转至个人中心页面,单击该页面中的退出登录按钮就可以退出登录并跳转回登录页面。

以上就是该网页的全部内容,祝大家期末不挂科(ง •̀_•́)ง


http://chatgpt.dhexx.cn/article/Aj98GcxC.shtml

相关文章

【精选】JavaScript网页时钟

文章目录 前言一、效果展示一、使用的技术二、日期对象1.指定时间2.获取目前时间 三、源代码总结 前言 今天带大家使用JavaScript定制一款网页时钟 一、效果展示 一、使用的技术 主要使用了js的日期对象,实现的时候先创建一个日期对象,并进行网页布局,对时间获取之…

JavaScript网页设计作业(美食网站设计与实现)

🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

Javascript网页设计作业: HTML班级网页设计 基于HTML+CSS+JS制作我们的班级网页(web前端学生网页设计作品)

📂文章目录 一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站演示五、🔧 网站代码🧱HTML结构代码💒CSS样式代码 六、🥇 如何让学习不再盲目七、&#x1f381…

网页之js

js jsjs基础语法规则数据类型函数定义调用对象内置对象自定义对象bom窗口移动domcss样式事件在前面的博客中我写了一些html和css样式的基础,但是,哪些仍然不够,碰到一些复杂的功能可能就无法解决了,所以我们又用到了js js 那么先来讲讲js,这个可以解决很多在页面操作上的…

3.2JavaScript网页编程——JavaScript网页编程基础

这里写目录标题 总体JS知识流程JS基本知识JS组成引入方式:内联、内部形式、外部输入输出字面量let(推荐)和var(面经有)变量(标识符)规则(31(不能数字开头)&am…

网页设计之JavaScript

文章目录 JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系 二.基本语法1.位置2.变量3.控制语句 三.函数,内置对象与事件1.函数基本语法:全局函数: 2.内置对象&#x…

JS实现网页效果

function $(id){return document.getElementById(id); } function $name(name){return document.getElementsByName(name); }树形菜单 onclick事件改变display属性来控制子树的显示开关效果function treeShow(id){//console.log("事件添加成功");if(document.getElem…

JavaScript—— 常见网页特效

目录 一、常见网页特效1. 案例:网页轮播图1.1 案例分析1.1.1 左右按钮的显示与隐藏1.1.2 动态生成小圆圈1.1.3 小圆圈的排他思想1.1.4 点击小圆圈滚动图片1.1.5 点击右侧按钮一次,就让图片滚动一张1.1.6 克隆第一张图片1.1.7 点击右侧按钮,小…

php几种常用的加密解密算法

本文给大家介绍php的三种常用的加密解密算法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 php 自带的加密函数: 不可逆的加密函数为:md5()、sha1()、crypt() md5() 用来计算 MD5 哈稀 md5(stri…

加解密算法概述

文章目录 加解密算法概述前言概述加解密算法国密算法 应用总体对称加解密非对称加解密 实现 加解密算法概述 前言 密码由来已久,相传公元前405年,雅典和斯巴达之间的伯罗奔尼撒战争最早出现密码,通过杂乱无章的字母拼接成一段话就是要传递的…

AES加密解密算法设计(C++)

目 录 1. 背景与意义 4 2. 系统设计 5 2.1系统主要目标 5 2.2主要软件需求(运行环境) 5 2.3功能模块与系统结构 6 3 系统功能程序设计 8 3.1基本要求部分 8 3.1.1 字节替换 8 3.1.2行移位 9 3.1.3列混合 11 3.1.4密钥加 13 3.1.5密钥扩展 14 …

加解密算法

总结 推荐使用的算法: 对称加密算法:AES-GCM-256,SM1 (硬件国密), SM4 (国密)非对称加密算法:RSA2048,SM2 (国密)信息摘要算法:SHA256,SM3 (国密散列算法) 对称加密算法/AES-GCM-256: GCMGM…

加密解密及算法详解

1、简介 今天我要给大家分享的是互联网通信中用到的各种加密解密算法,在我们介绍加解密知识前,首先我们了解一下密码学、密码、加密、数字签名、密钥交换等相关术语的含义。 1.1 密码学 密码学是研究编制密码和破译密码的技术科学。研究密码变化的客观规…

常见的加密解密算法

文章目录 一、概述二、区别 一、概述 加密分为单向加密和双向加密: 单向加密 又称为不可逆加密,即生成密文无法反解的一种加密方式;eg:MD5和SHA系列、HMAC。 双向加密 又称为可逆加密,即生成密文后,在需要的时候可以反…

RSA 加密解密算法实现(简单,易懂)!!!

目录 一、什么是RSA算法 1.对称加密 2.非对称加密 3.非对称加密的应用 二、RSA算法的基础操作步骤 1.生成公钥和私钥 2.用公钥加密信息 3.用私钥解密信息 三、AC代码 六、RSA算法的测试 七、共勉 一、什么是RSA算法 在计算机中常用的加密算法分为两类:对称…

13种加密与解密算法【一】

这15种加密解密算法分别是:散列哈希[MD5、SHA1、CRC32],对称[DES,3DES(TDEA、Triple DES),AES、,Blowfish,RC4、RC5,IDEA],Base64、Rabbit、Escape。【三种分…

【2021最新版】Linux面试题总结(48道题含答案解析)

文章目录 1、绝对路径用什么符号表示?当前目录、上层目录用什么表示?主目录用什么表示? 切换目录用什么命令?2、怎么查看当前进程?怎么执行退出?怎么查看当前路径?3、怎么清屏?怎么退出当前命令…

linux操作系统期末考试题库

别光看点个赞呗 文档完整下载链接: w​​​​​​​w​​​​​​​https://download.csdn.net/download/weixin_59241300/87299684 1. cal命令 2.cat命令 3.cd命令 4.date命令 5.echo命令 6.grep命令 7.head 命令 8.ls 命令 9.touch 命令 10.more命令 …

Linux上机考试试题

Linux基础机考测试题 1、如果忘记登录密码,如何破解超级用户root的密码,并将密码改为redhat。(操作过程抓图体现) 开机在出现grub画面,按e键 用上下键选中第二项(类似于kernel /boot/vmlinuz-2.4.18-14 ro rootLABEL…

linux考试题库

(Linux)是一个自由、免费、开放的系统软件,支持多种硬件平台,多用户、多任务特点。 Linux操作系统是(Linus Torvalds)第一个开发的。 下列中(单用户)不是Linux的特点。 Linux一般…