原生Js实现期末网页大作业——宠物之家

编程语言 2024-11-02 18:18:20 阅读次数: 0

一、前言      

    在信息技术飞速发展的今天，网页设计与开发已成为各行各业不可或缺的技能之一。随着互联网的普及和各种数字化需求的增加，掌握网页设计基础及JavaScript编程语言显得尤为重要。本项目不仅涵盖了网页设计的基本原则、结构布局、色彩运用等基础知识，还深入探讨了JavaScript在网页交互中的应用。通过理论与实践相结合的方式，学生能够在真实的项目中锻炼自己的技术能力，从而为未来的职业发展打下坚实的基础。

二、技术栈

Javascript+HTML+CSS+jQuery+Bootstrap

三、页面实现效果

1.Login页面

2.首页

3.家有萌宠

4.宠物百科页面

5.萌宠用品页面

扫描二维码关注公众号，回复： 17453235 查看本文章

6.匹配度测试

7.联系我们

四、最外层HTML结构

<body>
     <!-- 容器 -->
<div class="box">
<div class="header">
  <div class="left"><img src="./uploads/1.jpg" alt=""></div>
  <div class="search">
    <input type="text" class="form-control" placeholder="输入相关信息" aria-describedby="sizing-addon3">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </div>
  <div class="right">
    <ul>
      <li onclick="Show()"><a href="#">登录</a></li>
      <li>|</li>
      <li onclick="Showset()"><a href="#">注册</a></li>
    </ul>
  </div>
</div>
<div class="nav">
  <ul id="nav-list">
    <li><a href="#" onclick="loadIndex()">首页</a></li>
    <li><a href="#" onclick="loadSecond()">家有萌宠</a></li>
    <li><a href="#" onclick="loadThird()">宠物百科</a></li>
    <li><a href="#" onclick="loadFourth()">萌宠用品</a></li>
    <li><a href="#" onclick="loadFifth()">匹配度测试</a></li>
    <li><a href="#" onclick="loadSixth()">联系我们</a></li>
  </ul>
</div>
  <!-- content区域 -->
<div id="contener">
</div>
</div>

<!-- 登录框部分 -->
<div id="shade" class="c1 hide"></div>
<div id="modal" class="c2 hide">
  <div class="lefttt">
    <video src="../video/video.mp4" muted autoplay loop></video>
</div>
<div class="righttt">
<div class="right-con">
  <h1>欢迎来到宠物之家</h1>
  <h3>萌宠号</h3>
  <input class="text" type="text" id="petNumberInput">
  <h3>密码</h3>
  <input class="text" type="password" id="passwordInput">
  <div class="put">
    <input class="btn"  value="Login" onclick="Loginsuccess()" >
    <input class="btn"  value="Cancle" onclick="Hide()">
  </div>
</div>
</div>
</div>

<!-- 注册框部分 -->
<div id="shade2" class="cc1 hide"></div>
<div id="modal2" class="cc2 hide">
  <div class="lefttt">
    <video src="../video/video.mp4" muted autoplay loop></video>
</div>
<div class="righttt">
<div class="right-con">
  <h1>欢迎来到宠物之家</h1>
  <h3>萌宠号</h3>
  <input class="text" type="text" id="petNumberInputt">
  <h3>密码</h3>
  <input class="text" type="password" id="passwordInputtt">
  <h3>再次输入密码</h3>
  <input class="text" type="password" id="passwordInputt">
  <div class="put">
    <input class="btn"  value="Set" onclick="Setsuccess()" >
    <input class="btn"  value="Cancle" onclick="Hideset()">
  </div>
</div>
</div>
</div>
</body>

五、网页HTML结构

1.制作头部及导航模块

<div class="header">
  <div class="left"><img src="./uploads/1.jpg" alt=""></div>
  <div class="search">
    <input type="text" class="form-control" placeholder="输入相关信息" aria-describedby="sizing-addon3">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </div>
  <div class="right">
    <ul>
      <li onclick="Show()"><a href="#">登录</a></li>
      <li>|</li>
      <li onclick="Showset()"><a href="#">注册</a></li>
    </ul>
  </div>
</div>
<div class="nav">
  <ul id="nav-list">
    <li><a href="#" onclick="loadIndex()">首页</a></li>
    <li><a href="#" onclick="loadSecond()">家有萌宠</a></li>
    <li><a href="#" onclick="loadThird()">宠物百科</a></li>
    <li><a href="#" onclick="loadFourth()">萌宠用品</a></li>
    <li><a href="#" onclick="loadFifth()">匹配度测试</a></li>
    <li><a href="#" onclick="loadSixth()">联系我们</a></li>
  </ul>
</div>

2.制作banner模块

   <!-- 轮播图区域 -->
<div class="banner">
  <div class="content">
    <!-- 图片区域 -->
   <div class="list-banner">
    <ul id="item">
      <li class="item"><a href="#"><img src="./uploads/header2.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header3.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header5.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header4.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header5.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header6.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header5.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header4.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header3.jpg" alt=""></a></li>
      <li class="item"><a href="#"><img src="./uploads/header2.jpg" alt=""></a></li>
    </ul>
   </div>
    <div id="left-button">
      <i class="glyphicon glyphicon-chevron-left"></i>
    </div>
    <div id="right-button"> 
      <i class="glyphicon glyphicon-chevron-right"></i>
    </div>
    <!-- 小圆点区域 -->
    <div>
    <ul id="circle">
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
      <li class="circle"></li>
    </ul>
  </div>
  </div>
</div>

六、DOM API实现

1.表单校验规则 

function validateForm() {
  var name = document.getElementById("username").value;
  var phone = document.getElementById("userphone").value;
  var email = document.getElementById("useremail").value;
  var message = document.getElementById("usermessage").value;
console.log(name,phone,email,message);
  // 检查姓名是否为空
  if (name == "") {
    alert("请输入姓名");
    return false;
  }

  // 检查手机号码是否合法正则校验
  var phonePattern = /^1[3-9]\d{9}$/;
  if (!phonePattern.test(phone)) {
    alert("请输入正确的手机号码");
    return false;
  }

  // 检查邮箱地址是否合法
  var emailPattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  if (!emailPattern.test(email)) {
    alert("请输入正确的邮箱地址");
    return false;
  }

  // 检查留言信息是否为空
  if (message == "") {
    alert("请输入留言信息");
    return false;
  }

  // 校验通过，提交表单
  alert("提交成功");
  document.getElementById("username").value = "";
  document.getElementById("userphone").value = "";
  document.getElementById("useremail").value = "";
  document.getElementById("usermessage").value = "";
  return true;
}

 2.轮播图 

// 获取所有图片和介绍内容
var images = document.querySelectorAll('.fifth-answer img');
console.log(img);
// 使用var来定义变量使变量在同一个作用域下可以修改
var introductions = document.querySelectorAll('.intro-box');
console.log(introductions)
// 为每张图片添加点击事件
images.forEach((image, index) => {
  image.addEventListener('click', () => {
    // 隐藏所有介绍内容
    introductions.forEach(intro => {
      intro.style.display = 'none';
    });
    // 显示对应的介绍内容
    introductions[index].style.display = 'block';

    // 点击空白处隐藏当前介绍内容
    document.addEventListener('click', hideIntroduction);
  });
});

function hideIntroduction(event) {
  // 判断点击的区域是否在介绍内容内或者图片内
  if (!event.target.closest('.intro-box') && !event.target.closest('.fifth-answer img')) {
    introductions.forEach(intro => {
      intro.style.display = 'none';
    });
    // 移除点击空白处隐藏介绍内容的监听器
    document.removeEventListener('click', hideIntroduction);
  }
}

3.公告栏

  // 获取需要滚动的元素
  var scrollingText = document.getElementById('scrolling-text');
  console.log(scrollingText)
  var position = 0;
  
  // 设置定时器，每隔一段时间更新文本位置
  var scrollInterval = setInterval(function() {
    // 每次向左滚动一定距离
    position -= 1;
    scrollingText.style.transform = 'translateX(' + position + 'px)';
    
    // 如果文本已经完全滚出可见区域，则重置位置
    if (scrollingText.clientWidth + position <= 0) {
      position = scrollingText.clientWidth;
    }
  }, 50); // 每隔50毫秒滚动一次

4.宠物卡片

// 获取所有图片和介绍内容
var images = document.querySelectorAll('.fifth-answer img');
console.log(images);
// 使用var来定义变量使变量在同一个作用域下可以修改
var introductions = document.querySelectorAll('.intro-box');
console.log(introductions)
// 为每张图片添加点击事件
images.forEach((image, index) => {
  image.addEventListener('click', () => {
    // 隐藏所有介绍内容
    introductions.forEach(intro => {
      intro.style.display = 'none';
    });
    // 显示对应的介绍内容
    introductions[index].style.display = 'block';

    // 点击空白处隐藏当前介绍内容
    document.addEventListener('click', hideIntroduction);
  });
});

function hideIntroduction(event) {
  // 判断点击的区域是否在介绍内容内或者图片内
  if (!event.target.closest('.intro-box') && !event.target.closest('.fifth-answer img')) {
    introductions.forEach(intro => {
      intro.style.display = 'none';
    });
    // 移除点击空白处隐藏介绍内容的监听器
    document.removeEventListener('click', hideIntroduction);
  }
}

七、BOM API实现

Login页面登录实现首页跳转功能

function fn(){
      var petNumber = document.getElementById('petNumberInput').value;
     var password = document.getElementById('passwordInput').value;
  
     if (petNumber === '' || password === '') {
     alert('请输入萌宠号和密码');
    } else {
    window.location.href='./index.html'
        alert('登录成功！'); 
  }
 }

 

八、总结

  在本项目中，我们深入探讨了网页设计的基本原则及JavaScript编程语言的应用。本项目不仅提高了我们对网页结构、布局和用户体验的理解，也使我们掌握了JavaScript在实现动态交互和功能增强方面的基本技能。继续交流讨论吧~

九、代码仓库地址

PetHome: 使用原生前端三件套实现一个宠物之家的网页交互页面icon-default.png?t=O83Ahttps://gitee.com/tanzero/pet-home.git

猜你喜欢

转载自blog.csdn.net/weixin_74457498/article/details/142966752
今日推荐
周排行
daidingdaiding——BP箱线图应用
log4j.xml配置文件
在python3中安装mysql扩展，No module named 'ConfigParser'
如何点亮qq图标?
JAVAFX图像问题
什么是Serverless?
PropertyPlaceholderConfigurer扩展---spring读取properties配置文件
习 惯 学 生 开 始 上 网 网 友 ： 学 生 们 缓 缓 下 线 张 雨
链表相关知识总结
大话设计模式 —— 模板方法模式
每日归档
更多
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)
2025-03-07(0)
2025-03-06(0)
2025-03-05(0)
2025-03-04(0)
2025-03-03(0)
2025-03-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022