Html 小功能总结

news2025/8/12 7:52:48

文章目录

      • 一、html+css+js 填写表单实现下一步上一步操作
      • 二、JavaScript 中 style.display 属性
      • 三、html 静态页面传值的几种方法
      • 四、javascript 中的打印方法有几种
      • 五、获取th:each 索引值并拼接字符串

一、html+css+js 填写表单实现下一步上一步操作

来源：https://blog.csdn.net/qq_37591637/article/details/88983516

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 带语境色彩的面板</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    #step1{
        display : block;
    }
    #step2,#step3{
        display: none;
    }
    #step1,#step2,#step3{
        position: absolute;
        width: 100%;
        height: 40%;
        left: 2%;
        top:10%;
    }
</style>
<body>

<!-- 下一步，下一步 -->
<div id="step1" >
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">商铺名称</h3>
        </div>
        <div class="panel-body">
            <input type="text" placeholder="请输入商铺名称"/><br><br>
            <button type="button" class="btn btn-primary">上一步</button>
            <button type="button" class="btn btn-success" onclick="getnext('step2')" >下一步</button>
        </div>
    </div>
</div>
<div id="step2">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">手机号码</h3>
        </div>
        <div class="panel-body">
            <input type="text" placeholder="手机号码"/><br><br>
            <button type="button" class="btn btn-primary" onclick="getnext('step1')">上一步</button>
            <button type="button" class="btn btn-success" onclick="getnext('step3')">下一步</button>
        </div>
    </div>
</div>
<div id="step3">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">实体店地址</h3>
        </div>
        <div class="panel-body">
            <input type="text" placeholder="地址"/><br><br>
            <button type="button" class="btn btn-primary" onclick="getnext('step2')">上一步</button>
        </div>
    </div>
</div>
<!-- 下一步，下一步 -->
</body>
<script>
    function getnext(i){
        alert(i);
        var sz=new Array("step1","step2","step3");
        for(var j=0;j<sz.length;j++){
            if(i==sz[j]){
                document.getElementById(i).style.display="block";
            }else{
                document.getElementById(sz[j]).style.display="none";
            }
        }
    }
</script>
</html>

在这里插入图片描述

二、JavaScript 中 style.display 属性

来源：https://www.pxcodes.com/Codes/158683783591873.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<img id="style1" src="2022-11/0de335f7c3584b10bd3aad7ca457a2c320220925151003.jpg" width="150" height="150">
<br>
<input type="button" value="Hide" onclick="hide();"/>
<br>
<input type="button" value="Show" onclick="show();"/>

</body>
<script>
    function hide() {
        var e = document.getElementById("style1");
        e.style.display = "none";
    }
    function show(){
        var e = document.getElementById("style1");
        e.style.display = "block";
    }
</script>
</html>

在这里插入图片描述

三、html 静态页面传值的几种方法

来源：https://www.cnblogs.com/1998xujinren/p/11153912.html

  当然有一种方式是在页面跳转前，先发个请求到后台将值存储到session中，跳转后再发个请求到后台取出。这种方式不仅仅慢而且还特别耗费资源。

  以下有其他的几种方式：

方式1：使用拼接地址的方法。就是在跳转地址后面拼接参数。如下：

post1.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态网页传值(post)1</title>
<script>
    function click1(){
        var name = escape(document.getElementById("name").value);    //escape方法是改变编码
        var pwd = escape(document.getElementById("pwd").value);    
        var url = "get1.html?"  + "name=" + name + "&pwd=" + pwd ; //进行拼接传值
        location.href=url;
    }
</script>
</head>
<body>
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/>
    <input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get1.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>静态网页传值(get)1</title>
<script>
    function click1(){
        var url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
        var params = url.substr(1);//去掉问号
        var pa = params.split("&");
        var s = new Object();
        for(var i = 0; i < pa.length; i ++){
            s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
        }
        document.getElementById("name").value =s.name;
        document.getElementById("pwd").value = s.pwd;
    }
    /*
        这种传值的方式很方便，而且简单有效，但是缺点是受到url长度的限制，由于每个浏览器对url长度的限制不同，这里不好给出一个确定的限制，
        只知道这个传值传的数据量不能太大。
    */
</script>

</head>

<body>
    名字：<input type="text" id="name"/>
    密码：<input type="text" id="pwd"/> 
    <input type="button"  onclick="click1()" value="获取："/>
</body>
</html>

在这里插入图片描述
  这种方法简单有效，但是数据量有限制。

  从地址栏获取参数的手段，但是还有其他的手段。

post4.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>post4</title>

    <script>
        function click1(){
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            //如果这里传了中文，而且传的时候没有编码，怎么办？get页面接收的时候会乱码的。如何处理？详见get4.html
            //注意：这里拼接的是用#号
            location.href="get4.html#name=" + name + "&pwd=" + pwd;
        }
    </script>
</head>

<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get4.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>get4</title>
    <script>
        function click1(){
            var data = location.hash; //location.hash获取的是#号开始的所有字符串,包括#号，hash 属性是一个可读可写的字符串，　　　　　　//该字符串是 URL 的锚部分（从 # 号开始的部分）。
            //如果传过来的是中文不经过编码的话，这里就会出现乱码。如何解决？如下：
            data = decodeURI(data);
            var str_data = data.split("&");
            var name;
            var pwd ;

            name = str_data[0].split("=")[1];
            pwd = str_data[1].split("=")[1];

            document.getElementById("name").value = name;
            document.getElementById("pwd").value = pwd;
        }
    </script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>

在这里插入图片描述
方式2：使用本地存储的cookie。

post2.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>post2</title>
    <script>
        function click1(){
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            document.cookie = "name:" + name + "&pwd:" + pwd;
            location.href="get2.html";
        }
        /*
            关于cookie，要特别处理传过来的字符串，其次，还有些浏览器不支持cookie的，但目前来说，一般浏览器都支持cookie
        */
    </script>
</head>

<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get2.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>get2</title>
    <script>
        function click1(){
            var params= document.cookie;
            var pa = params.split("&");
            var s = new Object();
            for(var i = 0; i < pa.length; i ++){
                s[pa[i].split(":")[0]] = pa[i].split(":")[1];
            }
            document.getElementById("name").value =s.name;
            document.getElementById("pwd").value = s.pwd;
        }

    </script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>

  关于cookie就是要注意有些浏览器是不支持的，同时还需要注意cookie的时效的问题，cookie是可以设置失效时间的。关于cookie的解析也要注意一下。
在这里插入图片描述
方式3：localStorage

post3.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>post3</title>

    <script>
        function click1(){
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            localStorage.setItem("name",name);
            localStorage.setItem("pwd",pwd);
            location.href="get3.html";
        }
    </script>
</head>

<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="提交："/>
</body>
</html>

get3.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>get3</title>
    <script>
        function click1(){
            document.getElementById("name").value = localStorage.getItem("name");
            document.getElementById("pwd").value = localStorage.getItem("pwd");
        }
        /*
            方便简单， 但是要考虑浏览器的版本支持
        */
    </script>
</head>
<body>
名字：<input type="text" id="name"/>
密码：<input type="text" id="pwd"/>
<input type="button"  onclick="click1()" value="获取："/>
</body>
</html>

  这种方法简单有效，同时还不需要字符串解析。非常的有意思。但是要注意浏览器的版本支持，所以在使用前请判断是否支持。

  sessionStorage 和 localStorage 的区别是：
  1、localStorage的存储时间是永久的，若想要删除，需要人为删除；存储大小一般为5M；
  2、sessionStorage针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

注意：如果application.property 配置了 spring.resources.static-locations 参数可能会导致访问静态页面不成功。
 

四、javascript 中的打印方法有几种

  在JavaScript 中，我们通常会使用以下三种方式来打印数据：

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 console.log() 写入浏览器控制台
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试1</title>
</head>
<body>
<script>
    window.alert(5 + 6);
    document.write(5 + 6);
    console.log(5 + 6);
</script>
</body>
</html>

在这里插入图片描述

五、获取th:each 索引值并拼接字符串

    <div th:each="bean:${page.list}">
        <a th:href="@{'/detailDocById/' + ${bean.id} + '.do'}">
<!--            <span th:utext="${bean.title}"></span>-->
            <span th:utext="@{'第 ' + (${beanStat.index}+1) + ' 行数据'"></span>-->
        </a>
        <br/>
        <td th:utext="${bean.describe}"></td>
        <br/>
    </div>

注：用 th:text 不会解析 html，用 th:utext 会解析 html，在页面中显示相应的样式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/33551.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【LeetCode】摆动排序 [M]（数组）

【LeetCode】摆动排序 [M]（数组）

280. 摆动排序 - 力扣&#xff08;LeetCode&#xff09; 一、题目 给你一个的整数数组 nums, 将该数组重新排序后使 nums[0] < nums[1] > nums[2] < nums[3]... 输入数组总是有一个有效的答案。 示例 1&#xff1a; 输入&#xff1a;nums [3,5,2,1,6,4] 输出&…
阅读更多...
基于SpringBoot的篮球竞赛预约平台

基于SpringBoot的篮球竞赛预约平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SpringBoot 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;…
阅读更多...
新知实验室 腾讯云实时音视频 RTC WEB端初识

新知实验室 腾讯云实时音视频 RTC WEB端初识

这里写目录标题前言初识产品产品介绍基础功能高级功能扩展功能快速上手位置创建源码下载源码文档写入密钥使用调试区域前言 当前时代是信息行业飞速发展的时代&#xff0c;万物都在朝物联网方向转化。而人作为一个意识体&#xff0c;也正在通过互联网&#xff0c;认识一个全新…
阅读更多...
01-10-Hadoop-HA-概述

01-10-Hadoop-HA-概述

01-Hadoop-HA-概述&#xff1a; HA 1&#xff09;所谓HA&#xff08;High Available&#xff09;&#xff0c;即高可用&#xff08;7*24小时不中断服务&#xff09;。 2&#xff09;实现高可用最关键的策略是消除单点故障。HA严格来说应该分成各个组件的HA机制&#xff1a;H…
阅读更多...
【学习笔记14】JavaScript的循坏语句

【学习笔记14】JavaScript的循坏语句

一、while循坏 1、解释说明 while (循环结束条件) { 循环体}// 1. 初始化var num 1; // 2. 循环结束条件 num < 5while (num < 5) { // 3. 循环体console.log(1);// 4. 改变自身, 不写还能执行, 但是是死循环, 电脑死机速度num }2、课堂案例 2.1 计算1到100的…
阅读更多...
【学习笔记15】JavaScript的函数

【学习笔记15】JavaScript的函数

一、函数 笔记首发 &#xff08;一&#xff09;什么是函数 &#x1f644; 前端的函数, 与数学的函数, 完全是两个概念&#x1f644; 可以粗暴的理解为 一个盒子&#x1f644; 当一段需要多次使用的复杂代码段, 我们可以把它放在(抽离)一个盒子中(就是函数)&#x1f644;在需要…
阅读更多...
【math】利用Cardano方法对一元三次方程求解及python实现

【math】利用Cardano方法对一元三次方程求解及python实现

文章目录【参考】【问题描述】求解一元三次方程【代码实现】现成的包 cardano_method根据公式编写求解代码【总结】【参考】 用Cardano方法求解三次方程介绍cardano方法求解下载cardano方法包x^310求解问题、三次方程反函数问题Micorsoft-Math-solver 微软数学工具WolframAlph…
阅读更多...
《Transformers自然语言处理系列教程》第1章：Transformers 介绍

《Transformers自然语言处理系列教程》第1章：Transformers 介绍

2017年，谷歌的研究人员发表了一篇论文，提出了一种用于序列建模的新型神经网络架构。这种架构被称为Transformer，在机器翻译质量和训练成本方面都优于递归神经网络（RNNs）。 与此同时，一种名为ULMFiT的有效迁移学习方法表明，在一个非常大和多样化的语料库上，训练长短期记…
阅读更多...
Kotlin拿Android本地视频缩略图

Kotlin拿Android本地视频缩略图

本文主要讨论如下三个问题&#xff1a; 如何拿到本地视频&#xff1f;怎么拿视频缩略图&#xff1f;缩略图如何压缩&#xff1f; 1 如何拿到本地视频&#xff1f; 1.1 定义数据结构 先定义媒体信息数据结构MediaInfo&#xff0c;以及视频信息数据结构VideoInfo。 open class…
阅读更多...
我参加NVIDIA Sky Hackathon 训练文件的路径设置

我参加NVIDIA Sky Hackathon 训练文件的路径设置

各变量的作用 KEY 对应的是 NVIDIA ngc 的那个网站上面生成的那个 keyGPU 的索引&#xff0c; 这个一般不需要修改&#xff0c; 因为大家只有一块 GPU用户实验目录&#xff0c; 这个文件夹用于存放后续过程产生的一系列的文件数据下载目录&#xff0c; 存放数据 本地工程目录&a…
阅读更多...
Java并发编程实战读书笔记二

Java并发编程实战读书笔记二

第五章 基础构建模块 5.1 同步容器类 5.1.1 同步容器类的问题 如下&#xff0c;如果list含有10个元素&#xff0c;线程A调用getLast的同时线程B调用deleteLast&#xff0c;那么getLast可能会报ArrayIndexOutOfBoundsException 改为如下方式能确保size和get一致 Vector迭代也…
阅读更多...
【795. 区间子数组个数】

【795. 区间子数组个数】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个整数数组 nums 和两个整数&#xff1a;left 及 right 。找出 nums 中连续、非空且其中最大元素在范围 [left, right] 内的子数组&#xff0c;并返回满足条件的子数组的个数。 生成的测试用例…
阅读更多...
微信小程序| 用小程序复刻微信Wechat

微信小程序| 用小程序复刻微信Wechat

&#x1f4cc;个人主页&#xff1a;个人主页 ​&#x1f9c0; 推荐专栏&#xff1a;小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏&#xff01;从个人到商业的全套开发教程&#xff0c;实打实的干货分享&#xff0c;确定不来看看&#xff1f; …
阅读更多...
新的趋势：From Big to Small and Wide data

新的趋势：From Big to Small and Wide data

新的趋势&#xff1a;From Big to Small and Wide data 所以&#xff0c;在这个时候&#xff0c;作为率先提出要做 MySQL 开源 HTAP 数据库的 StoneDB&#xff0c;想要稍微冷静一下。 不是说我们不做 HTAP 了&#xff0c;而是有了一个新的思路。这个思路&#xff0c;也同样来…
阅读更多...
【模型训练】YOLOv7车辆三类别检测

【模型训练】YOLOv7车辆三类别检测

YOLOv7车辆三类别检测 1、车辆三类别检测模型训练2、模型评估3、模型和数据集下载网盘链接1、本项目采用YOLOv7算法实现对车辆三类别检测，在几千多张车辆三类别数据集中训练得到，我们训练了YOLOv7、，所有指标都是在同一个验证集上得到； 2、目标类别数：3；类别名：car、bus…
阅读更多...
【蓝桥杯选拔赛真题29】python堆砖块 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

【蓝桥杯选拔赛真题29】python堆砖块 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

目录 python堆砖块 一、题目要求 1、提示信息 1、编程实现 2、输入输出
阅读更多...
WindowsServer域控的安装与卸载

WindowsServer域控的安装与卸载

搭建域服务器 1.安装域控 打开服务器管理器, 点击右上角的管理, 选择添加角色和功能 一直点击下一步,直到选择服务器角色处, 勾选Active Directory域服务器 一直下一步&#xff0c;然后点击安装 安装完毕后将此服务器提升为域控制器 自行设置DSRM的密码, 后面一直点击下一步直…
阅读更多...
【优化调度】遗传算法求解公交车调度排班优化问题【含Matlab源码 2212期】

【优化调度】遗传算法求解公交车调度排班优化问题【含Matlab源码 2212期】

⛄ 一、 遗传算法简介 1 引言 公交排班问题是城市公交调度的核心内容,是公交调度人员、司乘人员进行工作以及公交车辆正常运行的基本依据。行车时刻表是按照线路的当前客流量情况,确定发车频率,提供线路车辆的首、末车时间。它是公交企业对社会的承诺,决定着为乘客服务的水平,…
阅读更多...
2023-2028年中国花炮行业市场供需与投资预测分析报告

2023-2028年中国花炮行业市场供需与投资预测分析报告

本报告由锐观咨询重磅推出&#xff0c;对中国花炮行业的发展现状、竞争格局及市场供需形势进行了具体分析&#xff0c;并从行业的政策环境、经济环境、社会环境及技术环境等方面分析行业面临的机遇及挑战。还重点分析了重点企业的经营现状及发展格局&#xff0c;并对未来几年行…
阅读更多...
【Java 设计模式】简单工厂模式 静态工厂模式

【Java 设计模式】简单工厂模式 静态工厂模式

简单工厂模式 & 静态工厂模式1 简单工厂模式1.1 角色1.2 点咖啡案例1.2.1 类图1.2.2 实现1.3 优点1.4 缺点2 静态工厂模式2.1 代码变动2.2 优点1 简单工厂模式 简单工厂模式并不属于 23 种设计模式。 1.1 角色 抽象产品&#xff1a;定义产品的规范&#xff0c;描述产品的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023