javascript入门实例：实现简单网页功能

已于 2023-02-10 21:28:24 修改
阅读量5k 收藏 33
点赞数 5
文章标签： javascript
于 2020-01-02 10:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38045338/article/details/103799985
版权

这两天做了一个简单的小网页，由于是初次接触HTML5和CSS，只实现了最基本的功能，后续会再对功能样式进行填充优化，这里记录一下。
实现效果：可通过切换上面的导航栏实现左侧导航栏的切换，并通过左侧导航栏的切换实现右侧具体导航内容的展示。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  /*<!--横向导航栏的宽度、高度和整体样式-->*/
  #TopNav {
    height: 40px;
    background: #b3d4fc;
    border-radius: 5px;
    padding-left: 300px;
  }
  /*<!--导航各个栏目的宽度、高度和对齐方式-->*/
  #TopNav ul li {
    list-style-type: none;
    width: 110px;
    height: 40px;
    float: left;
    text-align: left;
    line-height: 40px;
  }
  /*<!--导航选项不显示下划线-->*/
  #TopNav ul li a{
    text-decoration: none;
  }
  /*<!--左侧导航栏样式-->*/
  #sidebar_left {
    background: #cccccc;
    padding: 10px;
    height: 500px;
    width: 150px;
  }
  /*<!--左侧导航栏导航项样式-->*/
  #sidebar_left nav ul li {
    list-style-type: none;
    width: 90px;
    font-size: 20px;
    padding-top: 15px;
  }
  /*<!--导航选项不显示下划线-->*/
  #sidebar_left ul li a{
    text-decoration: none;
  }
  #sidebar_right {
    width:350px;
    float:left;
    padding:10px;
    margin-left: 190px;
    margin-top: 60px;
    font-size: 20px;
    align-content: center;
  }
  /*<!--页脚样式-->*/
  #footer {
    background-color:#b3d4fc;
    color:white;
    clear:both;
    text-align:center;
    border-radius: 5px;
    padding:5px;
  }
</style>
<body>
  <div id="TopNav">
    <nav>
      <ul>
        <li><a href="#/DefaultPage">首页</a></li>
        <li><a href="#/SendInfo">信息发布</a></li>
        <li><a href="#/Club">俱乐部</a></li>
        <li><a href="#/Appraisal">民主测评</a></li>
      </ul>
    </nav>
  </div>

  <div id="SendInfo" style="display: none">
    <nav>
      <ul>
        <li><a href="#/ActivityDynamic">活动动态</a></li>
        <li><a href="#/EmployeeBenefits">职工福利</a></li>
      </ul>
    </nav>
  </div>
  <div id="Club" style="display:none">
    <nav>
      <ul>
        <li><a href="#/FootBall">足球</a></li>
        <li><a href="#/BasketBall">篮球</a></li>
        <li><a href="#/Badminton">羽毛球</a></li>
        <li><a href="#/Yoga">瑜伽</a></li>
      </ul>
    </nav>
  </div>
  <div id="Appraisal" style="display:none">
    <nav>
      <ul>
        <li><a href="#/Suggestions">合理建议</a></li>
        <li><a href="#/Questionnaire">调查问卷</a></li>
      </ul>
    </nav>
  </div>

  <div id="sidebar_right">
    <p>PostManagementSystem</p>
  </div>

  <div id="sidebar_left">
    <nav>
      <ul>
        <li><a href="#/ActivityDynamic">活动动态</a></li>
        <li><a href="#/EmployeeBenefits">职工福利</a></li>
      </ul>
    </nav>
  </div>

  <div id="ActivityDynamics" style="display: none">
    <p>This is Activity Dynamics!</p>
  </div>
  <div id="Employeebenefits" style="display: none">
    <p>This is Employee benefits!</p>
  </div>
  <div id="FootBall" style="display: none">
    <p>This is Football!</p>
  </div>
  <div id="BasketBall" style="display: none">
    <p>This is BasketBall!</p>
  </div>
  <div id="Badminton" style="display: none">
    <p>This is Badminton!</p>
  </div>
  <div id="Yoga" style="display: none">
    <p>This is Yoga!</p>
  </div>
  <div id="Suggestions" style="display: none">
    <p>This is Suggestions!</p>
  </div>
  <div id="Questionnaire" style="display: none">
    <p>This is Questionnaire!</p>
  </div>

  <div id="footer">
    Copyright www.bbcc.cn
  </div>
</body>
<script>
  (function(){
    var Router = function () {
      this.routes = {};//保存路由
      this.curUrl = '';//获取当前的hash值
    }
    Router.prototype.init = function () {
      //hashchange事件，当hash变化时，调用reloadPage方法
      //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度
      window.addEventListener('hashchange', this.reloadPage.bind(this));
    }

    Router.prototype.reloadPage = function () {
      this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
      this.routes[this.curUrl]();      //运行当前hsah值对应的函数
    }

    Router.prototype.map = function( key, callback ){ //保存路由对应的函数：
      this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
    }
    window.oRou = Router;
  })

  (function(){
    var Router = function () {
      this.routes = {};//保存路由
      this.curUrl = '';//获取当前的hash值
    }
    Router.prototype.init = function () {
      //hashchange事件，当hash变化时，调用reloadPage方法
      //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度
      window.addEventListener('hashchange', this.reloadPage.bind(this));
    }

    Router.prototype.reloadPage = function () {
      this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
      this.routes[this.curUrl]();      //运行当前hsah值对应的函数
    }

    Router.prototype.map = function( key, callback ){ //保存路由对应的函数：
      this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
    }
    window.oRou = Router;
  })

  var oRouter2 = new oRou();
  oRouter2.init();
  oRouter2.map('/DefaultPage',function () {
    var leftNav = document.getElementById("sidebar_left");
    var sendInfoControl = document.getElementById("SendInfo").innerHTML;
    leftNav.innerHTML = sendInfoControl;
  })

  oRouter2.map('/SendInfo',function () {
    var leftNav = document.getElementById("sidebar_left");
    var sendInfoControl = document.getElementById("SendInfo").innerHTML;
    leftNav.innerHTML = sendInfoControl;

    var rightNav = document.getElementById("sidebar_right");
    var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML;
    rightNav.innerHTML = ActivityDynamicControl;
  })

  oRouter2.map('/Club',function () {
    var leftNav = document.getElementById("sidebar_left");
    var clubControl = document.getElementById("Club").innerHTML;
    leftNav.innerHTML = clubControl;

    var rightNav = document.getElementById("sidebar_right");
    var footBallControl = document.getElementById("FootBall").innerHTML;
    rightNav.innerHTML = footBallControl;
  })

  oRouter2.map('/Appraisal',function () {
    var leftNav = document.getElementById("sidebar_left");
    var appraisalControl = document.getElementById("Appraisal").innerHTML;
    leftNav.innerHTML = appraisalControl;

    var rightNav = document.getElementById("sidebar_right");
    var suggestionsControl = document.getElementById("Suggestions").innerHTML;
    rightNav.innerHTML = suggestionsControl;
  })

  oRouter2.map('/ActivityDynamic',function () {
    var rightNav = document.getElementById("sidebar_right");
    var ActivityDynamicControl = document.getElementById("ActivityDynamics").innerHTML;
    rightNav.innerHTML = ActivityDynamicControl;
  })

  oRouter2.map('/EmployeeBenefits',function () {
    var rightNav = document.getElementById("sidebar_right");
    var employeeBenefitsControl = document.getElementById("Employeebenefits").innerHTML;
    rightNav.innerHTML = employeeBenefitsControl;
  })

  oRouter2.map('/FootBall',function () {
    var rightNav = document.getElementById("sidebar_right");
    var footBallControl = document.getElementById("FootBall").innerHTML;
    rightNav.innerHTML = footBallControl;
  })

  oRouter2.map('/BasketBall',function () {
    var rightNav = document.getElementById("sidebar_right");
    var basketBallControl = document.getElementById("BasketBall").innerHTML;
    rightNav.innerHTML = basketBallControl;
  })

  oRouter2.map('/Badminton',function () {
    var rightNav = document.getElementById("sidebar_right");
    var badmintonControl = document.getElementById("Badminton").innerHTML;
    rightNav.innerHTML = badmintonControl;
  })

  oRouter2.map('/Yoga',function () {
    var rightNav = document.getElementById("sidebar_right");
    var yogaControl = document.getElementById("Yoga").innerHTML;
    rightNav.innerHTML = yogaControl;
  })

  oRouter2.map('/Suggestions',function () {
    var rightNav = document.getElementById("sidebar_right");
    var SuggestionsControl = document.getElementById("Suggestions").innerHTML;
    rightNav.innerHTML = SuggestionsControl;
  })

  oRouter2.map('/Questionnaire',function () {
    var rightNav = document.getElementById("sidebar_right");
    var QuestionnaireControl = document.getElementById("Questionnaire").innerHTML;
    rightNav.innerHTML = QuestionnaireControl;
  })
</script>
</html>
woniudaidai
关注
  • 5
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
JavaScript入门实例源码案例
11-24
JavaScript入门实例源码案例 本文主要围绕JavaScript的基本概念、语法、数据类型、变量生命周期、运算符等方面进行了详细的介绍。 1. JavaScript概念 JavaScript是一门客户端脚本语言，运行在客户端浏览器中的。每...
20个JavaScript开发案列（二）
终成大师的博客
02-19 1914
20个JavaScript开发案列(二)
JS常见网页特效案例
liu_to_liu的博客
05-30 5410
JS常见网页特效案例1、网页轮播图2、返回顶部3、筋斗云案例 1、网页轮播图 window.addEventListener('load', function() { // 1）获取元素 var arrow_l = document.querySelector('.arrow_l'); var arrow_r = document.querySelector('.arrow_r'); var focus = document.querySelector('.focus'); // 2）鼠标
JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页
最新发布
dreamweaver网页设计
06-02 846
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
javascript设计网页作品,javascript网站设计
阿发狗伪原创
11-12 2755
大家好，小编来为大家解答以下问题，html+css+javascript网页制作案例教程素材，javascript设计网页作品，现在让我们一起来看看吧！
用HTML+CSS+JS做一个漂亮简单的公司网站（JavaScript期末大作业）
wx___BJ050106的博客
12-07 2410
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
个人网页的Javascript代码
weixin_57130283的博客
02-11 1497
个人网页js代码
JavaScript实现的内存数据库LokiJS介绍和入门实例
01-21
LokiJS是一个内存数据库，将性能考虑放在第一位。 LokiJS支持索引和更快的...JavaScript是一种简单易学，通用的语言，所以在javascript数据库开发非常很容易且非常高效。如果你的MongoDB还没有退休，在下面这些情况，您
javascript面向对象快速入门实例
10-24
主要介绍了javascript面向对象快速入门实例,以一个简单实例分析了javascript面向对象的中对象的定义与使用技巧,需要的朋友可以参考下
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。本教程将带你逐步进入Vue的世界，通过实战案例，从零开始构建一个网站后台管理系统。 首先，我们从基础...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-07 2万+
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：葡萄酒酒庄HTML网站模板，DIV+
js 仿京东放大镜
不想起床
10-17 324
功能模块 整个案例可以分为三个功能模块 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能。 移动黄色遮挡层，大图片跟随移动功能。 案例分析 黄色的遮挡层跟随鼠标功能。 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。 首先是获得鼠标在盒子的坐标。 之后把数值给遮挡层做为left 和top值。 此时用到鼠标移动事件，但是还...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
VX_WJ88950106的博客
12-15 3790
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
JavaScript大作业 制作简单的程序员个人博客网站（web前端网页制作课作业）
QQ_____365392777的博客
08-20 773
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
用js做一个简单的网页,用javascript做一个网页
2301_79533350的博客
11-05 2848
大家好，小编为大家解答用javascript写简单网页家乡的介绍代码的问题。很多人还不知道用javascript写简单网页小游戏，现在让我们一起来看看吧！
Js制作简单的网页
ahty的专栏
08-20 3万+
 一个简易的纯JS的CRM管理系统 1 概述 这是一个综合的JS开发的管理系统，仅有基本功能，大约1500行代码，使用本地的数据localStorage作为临时测试数据的存储，同时用到了sessionStorage作为用户登陆信息的存储。该管理系统从用户登陆、注册到退出都采用了相关联的操作，让用户在没有登陆的情况下无法进入主页，有3天记住密码的选项，而且搜索中用了很多
web前端 html+css+javascript网页设计实例 企业网站制作
bhegi_seg的博客
03-06 7693
(案例文件链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室
05-27
好的，下面是关于WebSocket实例的简单多人聊天室的教程： 在这个例子中，我们将创建一个简单的多人聊天室，用户可以在其中发送消息，同时所有连接到聊天室的用户都将看到这些消息。 1. 首先，我们需要一个HTML页面，用于显示聊天室的界面。创建一个新文件`index.html`，并添加以下内容： ```html <!DOCTYPE html> <html> <head> <title>WebSocket Chat Room</title> </head> <body> <div id="chatBox"></div> <form> <input type="text" id="messageInput" /> <button type="submit">Send</button> </form> <script src="chat.js"></script> </body> </html> ``` 这是一个非常简单的HTML页面，其中包含一个`<div>`元素，用于显示聊天记录，以及一个`<form>`元素，用于发送新的聊天消息。我们还添加了一个JavaScript文件`chat.js`，稍后我们将在其中编写聊天室的逻辑。 2. 接下来，我们需要编写聊天室的服务器端代码。创建一个新文件`server.js`，并添加以下内容： ```javascript const WebSocket = require("ws"); const server = new WebSocket.Server({ port: 8080 }); const connections = []; server.on("connection", (socket) => { console.log("New client connected"); connections.push(socket); socket.on("message", (message) => { console.log(`Received message: ${message}`); connections.forEach((connection) => { if (connection !== socket) { connection.send(message); } }); }); socket.on("close", () => { console.log("Client disconnected"); const index = connections.indexOf(socket); if (index > -1) { connections.splice(index, 1); } }); }); ``` 这是一个非常简单的WebSocket服务器，它监听端口`8080`上的所有连接。每当有新客户端连接时，服务器都会将其添加到`connections`数组中。当服务器收到任何消息时，它将将该消息发送给所有其他连接的客户端。当客户端断开连接时，服务器将从`connections`数组中删除该客户端。 3. 最后，我们需要编写客户端代码，用于连接到聊天室并发送消息。在`chat.js`文件中添加以下内容： ```javascript const socket = new WebSocket("ws://localhost:8080"); const chatBox = document.getElementById("chatBox"); const messageInput = document.getElementById("messageInput"); socket.onmessage = (event) => { const message = event.data; const messageElement = document.createElement("div"); messageElement.innerText = message; chatBox.appendChild(messageElement); }; document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); const message = messageInput.value.trim(); if (message.length > 0) { socket.send(message); messageInput.value = ""; } }); ``` 这是一个非常简单的WebSocket客户端，它连接到服务器端口`8080`，并通过`onmessage`事件处理程序处理来自服务器的任何消息。每当客户端发送新消息时，它将通过`socket.send`方法将该消息发送到服务器。 4. 最后，启动服务器：在终端中运行`node server.js`。 5. 在浏览器中打开`index.html`文件，你应该看到一个简单的聊天室界面。在多个浏览器窗口中打开该界面，并尝试在其中一个窗口中发送消息。你将看到该消息立即显示在所有窗口中。 现在你已经创建了一个简单的WebSocket聊天室，你可以扩展它以包括更多功能，例如昵称、私人消息、表情符号等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

woniudaidai

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值