【JavaWeb】网页特性

最新推荐文章于 2024-06-21 16:41:46 发布
最新推荐文章于 2024-06-21 16:41:46 发布
阅读量47 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwj220/article/details/132291654
版权

1.全选效果

1.1Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选效果</title>

</head>
<body>
<script>
    window.onload=function () {
        const all = document.getElementById("all");
        const checks = document.getElementsByName("check");
        all.onclick = function () {
            for (let i = 0; i < checks.length; i++) {
                checks[i].checked = all.checked;
            }
        }
    }
</script>
<input type="checkbox" name="all" id="all" onclick="checkAll()"/>
<span id="show">全选</span>
<ul class="list">
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
    <li><input name="check" type="checkbox" /></li>
</ul>

</body>
</html>

1.2JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选效果</title>
    <script>
        $(function() {
            $("#all").click(function() {
                if ($(this).prop("checked")) {
                    $("#show").text("反选");
                    $(".list>li>input").prop("checked", true);
                } else {
                    $("#show").text("全选");
                    $(".list>li>input").prop("checked", false);
                }
            })
        });
    </script>
</head>
<body>
    <input type="checkbox" name="all" id="all" />
    <span id="show">全选</span>
    <ul class="list">
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
</body>
</html>

2.在线留言

2.1Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线留言</title>
  <style>
    .msg {
      height: 500px;
      width: 500px;
      border: 1px solid red;
    }
  </style>
    <script>
        function comment(){
            var comment=document.getElementById("comment");
            var list=document.getElementsByClassName("list");
            var li=document.createElement("li");
            li.innerHTML=comment.value;
            list.appendChild(li);
            comment.val("");
        }
    </script>
</head>
<body>
<div class="msg">
  <ul class="list">
    <li>群主大人好，红包拿来</li>
  </ul>
</div>
<textarea id="comment" rows="10" cols="40"></textarea><br />
<button onclick="comment()">提交留言</button>

</body>
</html>

2.2JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线留言</title>
  <style>
    .msg {
      height: 500px;
      width: 500px;
      border: 1px solid red;
    }
  </style>
    <script src="../../js/jquery-3.7.0.js"></script>
  <script type="text/javascript">
    function comment() {
      $(".list").append("<li>"+ $("#comment").val() +"</li>");
      $("#comment").val("");
    }
  </script>
</head>
<body>
<div class="msg">
  <ul class="list">
    <li>群主大人好，红包拿来</li>
  </ul>
</div>
<textarea id="comment" rows="10" cols="40"></textarea><br />
<button onclick="comment()">提交留言</button>

</body>
</html>

3.Tab切换

3.1Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .tab {
            width: 500px;
            height: 300px;
            border-radius: 10px;
            border: 1px solid gainsboro;
        }
        .tab>.tab_title {
            width: 500px;
            height: 40px;
        }
        .tab>ul.tab_title>li {
            width: 165px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            border-left: 1px solid gainsboro;
            border-bottom: 1px solid gainsboro;
            cursor: pointer;
        }
        .tab>ul.tab_title>li:last-child {
            width: 167px;
        }
        .tab>.tab_content {
            width: 480px;
            height: 240px;
            display: none;
            font-size: 18px;
            padding: 10px;
        }
        .active {
            background: salmon;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }
    </style>
    <script>
        window.onload=function () {
            var tab_title = document.querySelector('.tab_title');
            var lis = tab_title.querySelectorAll('li');
            var contents = document.querySelectorAll('.tab_content');
            for (var i = 0; i < lis.length; i++) {
                lis[i].setAttribute('index', i);
                lis[i].onclick = function () {
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    this.className = 'active';
                    var index = this.getAttribute('index');
                    for (var i = 0; i < contents.length; i++) {
                        contents[i].style.display = 'none';
                    }
                    contents[index].style.display = 'block';
                }
            }
        }
    </script>
</head>
<body>
<div class="tab">
    <ul class="tab_title">
        <li class="active">标题1</li>
        <li>标题2</li>
        <li>标题3</li>
    </ul>
    <ul class="tab_content" style="display: block;">
        <li>这个是内容1</li>
    </ul>
    <ul class="tab_content">
        <li>这个是内容2</li>
    </ul>
    <ul class="tab_content">
        <li>这个是内容3</li>
    </ul>
</div>
</body>
</html>

3.2JQuery

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>tab切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .tab {
      width: 500px;
      height: 300px;
      border-radius: 10px;
      border: 1px solid gainsboro;
    }
    .tab>.tab-title {
      width: 500px;
      height: 40px;
    }
    .tab>ul.tab-title>li {
      width: 165px;
      height: 40px;
      float: left;
      line-height: 40px;
      text-align: center;
      border-left: 1px solid gainsboro;
      border-bottom: 1px solid gainsboro;
      cursor: pointer;
    }
    .tab>ul.tab-title>li:last-child {
      width: 167px;
    }
    .tab>.tab-content {
      width: 480px;
      height: 240px;
      display: none;
      font-size: 18px;
      padding: 10px;
    }
    .active {
      background: salmon;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  </style>
  <script src="../../js/jquery-3.7.0.js" ></script>
  <script type="text/javascript">
    $(function() {
      $(".tab-title>li").click(function() {
        var $index = $(this).index()
        $(".tab-title>li").eq($index).addClass("active").siblings().removeClass("active");
        $(".tab-content").eq($index).show().siblings(".tab-content").hide();
      });
    });
  </script>
</head>
<body>
<div class="tab">
  <ul class="tab-title">
    <li class="active">标题1</li>
    <li>标题2</li>
    <li>标题3</li>
  </ul>
  <ul class="tab-content" style="display: block;">
    <li>这个是内容1</li>
  </ul>
  <ul class="tab-content">
    <li>这个是内容2</li>
  </ul>
  <ul class="tab-content">
    <li>这个是内容3</li>
  </ul>
</div>
</body>
</html>

4.下拉菜单

4.1Dom

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      background-color: antiquewhite;
      padding-left: 10px;
      position: relative;
    }
    .wrap li {
      float: left;
      width: 100px;
      height: 30px;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      color: black;
      text-decoration: none;
      display: block;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: aqua;
    }
    .wrap li ul {
      position: absolute;
      display: none;
    }
  </style>
  <script>
      var lis=document.getElementsByClassName(".title");
      for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover= function () {
          this.children[1].style.display = 'block';
        }
        lis[i].onmouseout= function () {
          this.children[1].style.display = 'none';
        }
      }
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li class="title">
      <a href="#">一级菜单1</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li class="title">
      <a href="#">一级菜单2</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li class="title">
      <a href="#">一级菜单3</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

4.2JQuery

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      background-color: antiquewhite;
      padding-left: 10px;
      position: relative;
    }
    .wrap li {
      float: left;
      width: 100px;
      height: 30px;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      color: black;
      text-decoration: none;
      display: block;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: aqua;
    }
    .wrap li ul {
      position: absolute;
      display: none;
    }
  </style>
  <script src="../../js/jquery-3.7.0.js"></script>
  <script>
    $(function () {
      $(".wrap>ul>li").hover(function() {
        $(this).children("ul").stop(true).slideToggle(200);
      });
    })
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="#">一级菜单1</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">一级菜单2</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">一级菜单3</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

5.回到顶部

5.2JQuery

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style >
    .container {
      height: 1800px;
      width: 100%;
    }
    .box {
      height: 120px;
      width: 120px;
      border-radius: 10px;
      background-color: sienna;
      font-size: 25px;
      text-align: center;
      line-height: 120px;
      color: white;
      position: fixed;
      right: 50px;
      bottom: 30px;
      cursor: pointer;
      display: none;
    }
  </style>
  <script src="../../js/jquery-3.7.0.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).on("scroll", function() {
        if ($(window).scrollTop() > 50) {
          $(".box").show()
        } else {
          $(".box").hide()
        }
      });
      $(".box").click(function() {
        $("html,body").animate({"scrollTop": 0}, 300, "swing");
      });
    });
  </script>
</head>
<body>
<div class="container">
</div>
<div class="box">
  回到顶部
</div>
</body>
</html>
cwj220
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaWeb学习笔记
weixin_46819313的博客
08-01 285
Java Web 1、基本概念 1.1、前言 Web 开发： web 网页的意思，www.baidu.com 静态web html、css 提供给所有人看的数据始终不会发生变化 动态web 淘宝等…几乎所有的网站 提供给所有人看的数据会发生变化（不同时间、不同地点（场合）） 技术栈：Servlet/Jsp、ASP、PHP 在Java中，动态web资源开发的技术统称为 JavaWeb； 1.2、Web应用程序 Web应用程序，可以提供浏览器访问的程序： a.html 、
JavaWeb.pdf
04-12
JavaWeb技术是基于Java语言开发Web应用程序的一种技术...从简单的网页交互到复杂的业务流程，JavaWeb技术栈提供了必要的工具和框架，以满足各种开发需求。了解和掌握这些技术对于成为一名专业的JavaWeb开发者至关重要。
JavaWeb笔记
weixin_47724824的博客
06-21 1777
第一章 JavaWeb简介 第1节 什么是web web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构 第2节 什么是JavaWeb 使用Java技术实现上面的功能，即使用Java技术实现网络的互联互通 第二章
JavaWEB总结
xinyi_java的博客
09-05 468
目录 1.说下原生 jdbc 操作数据库流程？ 2.HTTP有哪些请求方法? 3.如何解决跨域问题? 4.简述Get，Post请求的区别以及他们的传参方式? 5.servlet,filter,listener,interceptor之间的区别和联系？ 6.JSP有哪些内置对象和动作?它们的作用分别是什么? 7.forward（请求转发）和redireet（重定向）的区别？ 8.JSP中动态INCLUDE与静态INCLUDE 的区别? 9.什么是 xml，使用 xml 的优缺点，xml
JavaWeb知识点
kds257248的博客
06-17 261
TCP/IP协议 TCP报文格式；三次握手；四次挥手； HTTP协议 HTTP1.0；HTTP1.1 ； HTTP2.0；请求头格式；响应头格式；文本传输协议数据域格式；二进制数据传输数据域格式；请求头变量； WebSocket 浏览器与服务端通信； Servlet B/S架构与C/S架构；什么是JavaEE ； Servlet的本质；tomcat的安装；tomcat与servlet的关系； tomcat与servlet版本对应关系；web应用目录结构； web.xml的
javaweb——网页开发基础
weixin_54397792的博客
11-19 751
文章目录一、HTML技术1.1HTML简介二、CSS技术2.1CSS概述2.2CSS示例三、JavaScript基础3.1DOM相关知识3.2JavaScript概述 一、HTML技术 1.1HTML简介 HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接
java web动态网页_JavaWeb-动态页面技术JSP
weixin_36303305的博客
02-17 646
JavaWeb-动态页面技术JSP通过了解JSP的历史可以知道JSP的本质就是Servlet，而其中直接写的HTML标签是JSP自动帮我们翻译成java代码从而输出实现的。JSP脚本格式说明简单讲java代码进入servixe()内部就像是service()内部的代码进入service()内部的out.print()页面输出只能是要输出的内如成为Servlet的成员内容成员位置就可以定义方法了JS...
JavaWeb面经
m0_50736744的博客
08-22 479
详细讲解了JavaScript、JQuery、Tomcat、XML、Servlet、HTTP协议、JSP/EL表达式、Cookie 和Session 、Filter过滤器、JSON、AJAX、i18n的内容以及常见的面试问题。
JavaWeb
chaogewudi34的博客
05-01 644
JavaWeb：前端（HTML、CSS、JS、Vue、Axios、ElementPlus）、后端（Maven、SpringMVC、Spring Framework、Mybatis、SpringBoot、JWT令牌、OSS云）
JavaWeb是什么？总结一下JavaWeb的体系
热门推荐
qq_41911570的博客
10-23 16万+
JavaWeb是什么？通过最近在尚硅谷上学习，分享一下Java WEB前言JavaWeb的技术体系登录页面的开发涉及的技术知识点HTML是什么?登录功能实现-环境的搭建涉及的技术知识点Web服务器Tomcat服务器的安装及配置在eclipse中配置tomcat创建动态的web工程登录功能实现-LoginServletServlet在web.xml中的配置获取请求参数值响应结果具体登录功能的实现步骤...
javaweb
doyoudooo的博客
05-05 1088
javaweb java web 文章目录~javaweb~1.基本概念1.1前言1.1web应用程序1.3静态web1.4动态web2.web服务器2.1技术讲解ASP:PHPJSP/Servlet：3.web服务器3.Tomcat1.安装Tomcat文件夹的作用3.2启动、关闭3.3配置问题3.4发布一个web网站4、Http4.1、什么是http4.2、两个时代4.3、HTTP请求1.请求行2.消息头4.4、HTTP响应0.响应头1.响应体2.状态码（重点）5.Maven5.1Maven项目架构管理工
javaweb在线支付功能实现代码
08-30
- `@WebServlet` 注解：这是Java Servlet 3.0及以上版本引入的新特性，用于声明Servlet，避免了传统的web.xml配置。在这里，`@WebServlet("/payOnline")`表示当用户访问"/payOnline"路径时，会触发`PayOnline`类的...
JavaWeb开发技术-JSP指令.pptx
07-06
JavaWeb开发技术是构建Web应用程序的关键技能之一，它利用了诸如JavaServer Pages (JSP) 这样的技术来创建动态、交互式的网页。在JSP中，指令元素扮演着重要的角色，它们提供了一种方式来定义JSP页面的全局属性。本...
Hadoop+JavaWeb大数据分析可视化系统.docx
11-28
通过利用Hadoop的特性进行分布式存储，目的在于突破IO存储瓶颈问题。 Hadoop生态圈 Hadoop生态圈主要包括HDFS、Hive、Sqoop、Mapreduce、MySQL等组件。HDFS用于分布式存储，Hive用于数据的清洗、提炼和分析，Sqoop...
javaweb实验-实现一个表单注册登录网页
09-24
5. **HTML5**：HTML5是HTML的最新版本，增加了许多新特性，如语义化标签、离线存储、多媒体支持等，提高了开发效率和网页性能。 6. **CSS（Cascading Style Sheets）**：CSS用于定义网页的样式和布局，通过选择器和...
不出网上线CS的各种姿势（内网横向）
最新发布
qq_64395221的博客
06-21 882
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 979
JSON，Ajax
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 458
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
d312697510的博客
06-19 218
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
javaweb网页设计
09-16
基于您提供的引用内容，javaweb网页设计是一个使用Java编写的Web应用程序。它主要用于创建和开发运行在Web浏览器上的网页和应用程序。在JavaWeb课程设计中，可以通过Java编写后端代码，并使用HTML、CSS和JavaScript...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值