前端+php:实现提示框(自动消失)

效果

php部分:只展示插入过程

<?php//插入注册表中$sql_insert = "INSERT INTO regist_user(userid,password,phone,email)VALUES ('" . $_POST['UserID'] . "','" . CryptPass($_POST['Password']) . "','" . $_POST['Phone'] . "','" . $_POST['Email'] . "')";$result_insert = mysqli_query($conn, $sql_insert);//重定向header('Refresh: 1; URL=' . $_SERVER['PHP_SELF']);
?>

html部分:添加消息提示框的标签

<div id="message" class="message"></div>

js部分:实现成功插入的提示

如果在php中出现了变量$result_insert,就设置message值为"插入成功",反之提示“插入失败”;设置className的值为success,反之为error。

添加className作为类名,并添加message的值作为文本内容(提示内容)

<script>//消息提示// 获取提示框元素var messageElement = document.getElementById('message');// 设置提示消息文本和样式var message = '<?php echo $result_insert ? "插入成功" : "插入失败"; ?>';var className = '<?php echo $result_insert ? "success" : "error"; ?>';// 添加类名和文本内容messageElement.classList.add(className);messageElement.textContent = message;// 显示提示框messageElement.style.display = 'block';// 延迟一段时间后隐藏提示框setTimeout(function() {messageElement.style.display = 'none';}, 1000);
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI视野·今日NLP 自然语言处理论文速览 第八十期】Fri, 1 Mar 2024

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 1 Mar 2024 Totally 67 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Loose LIPS Sink Ships: Asking Questions in Battleship with Language-Informed Program Sampling Authors G…

docker ubuntu20.04 安装教程

ubuntu20.04 安装 docker 教程 本博客测试安装时间2023.8月 一、docker安装内容&#xff1a;docker Engine社区版 和 docker Compose 二、安装环境&#xff1a;ubuntu20.04 三、安装步骤&#xff1a; # 如果已经安装过docker&#xff0c;请先卸载&#xff0c;没安装则跳过…

从零开始学习Netty - 学习笔记 -Netty入门【协议设计和解析】

2.协议设计和解析 协议 在计算机中&#xff0c;协议是指一组规则和约定&#xff0c;用于在不同的计算机系统之间进行通信和数据交换。计算机协议定义了数据传输的格式、顺序、错误检测和纠正方法&#xff0c;以及参与通信的各个实体的角色和责任。计算机协议可以在各种不同的层…

探索云原生世界:Spring Cloud全方位解读——构建微服务架构的利器

目录 一、微服务简介 二、微服务发展史 三、Spring Cloud 3.1 Spring Cloud 版本策略 3.2 Spring Cloud 发展历程 微服务是一种软件架构风格&#xff0c;将单一应用程序拆分成一组小型、独立的服务。每个服务运行在自己的进程中&#xff0c;服务之间采用轻量级通信机制进行交…

Open3D 进阶(21)无序点云平面检测的鲁棒统计方法

目录 一、算法原理1、算法过程2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、算法过程 除了寻找具有最大支持的单个平面外,Open3D还包含一个算法,该算法使…

【Java EE初阶二十九】Linux 系统的学习

当前写的博客系统程序,只是部署在咱们自己的电脑上,其他用户是无法直接访问的.由于 NAT 机制的存在,导致了IP 地址就被分成了 内网 IP 和 外网 IP. 云服务器,包括公司中使用专用服务器,一般都是 Linux 系统&#xff0c;这个系统的使用和 Windows 差异很大.(通过命令行来操作的系…

Jupyter Notebook的安装和使用(windows环境)

一、jupyter notebook 安装 前提条件&#xff1a;安装python环境 安装python环境步骤&#xff1a; 1.下载官方python解释器 2.安装python 3.命令行窗口敲击命令pip install jupyter 4.安装jupyter之后&#xff0c;直接启动命令jupyter notebook,在默认浏览器中打开jupyte…

SQL教学:掌握MySQL数据操作核心技能--DML语句基本操作之“增删改查“

大家好&#xff0c;今天我要给大家分享的是SQL-DML语句教学。DML&#xff0c;即Data Manipulation Language&#xff0c;也就是我们常说的"增 删 改 查"&#xff0c;是SQL语言中用于操作数据库中数据的一部分。作为MySQL新手小白&#xff0c;掌握DML语句对于数据库数…

测试环境搭建整套大数据系统-问题篇(一:实时遇到的问题)

1. java.io.IOException: Failed to deserialize JSON ‘{“age”:867,“sex”:“fba8c074f9”,“t_insert_time”:“2024-03-04 14:12:24.821”}’ 解决方式 修改数据类型。将TIMESTAMP_LTZ改为TIMESTAMP。 2. java. lang,classNotFoundException: org,apache.flink,streami…

典中典之西电A测-气压测控仿真系统

兄弟,如果你看到这篇,只能说明你A测也挂了,没办法,哥们太菜了,抄的太假过不了你电有些老师的慧眼 这坨&#x1f415;⑩我先吃为敬 环境搭建可以参考这个兄弟的博客 一、题目要求 实现功能&#xff1a;使用 Arduino UNO 微控制器&#xff0c;搭建一个 PC 上位机远程气压检测控…

账号管理支持批量测试资产可连接性,资产管理支持通过标签方式选择资产,JumpServer堡垒机v3.10.4 LTS版本发布

2024年3月4日&#xff0c;JumpServer开源堡垒机正式发布v3.10.4 LTS版本。JumpServer开源项目组将对v3.10 LTS版本提供长期的支持和优化&#xff0c;并定期迭代发布小版本。欢迎广大社区用户升级至v3.10 LTS最新版本&#xff0c;以获得更佳的使用体验。 在v3.10.4 LTS版本中&a…

spring-smart-di 动态切换接口源

0、背景 一般我们系统同一个功能可能会对接多个服务商&#xff0c;防止某个服务商的服务不可用快速切换或者收费不同需要切换&#xff0c;那我们一般做快速切换逻辑传统无非就是先将每个服务商实现&#xff0c;然后在配置点&#xff08;数据库或者nacos&#xff09;配置当前正…

ChromeDriver全版本下载教程

确定自己的Chrome版本 step1. 打开Chrome浏览器右上角的三个点&#xff0c;再点击设置 step2. 在设置中点击“关于Chrome”&#xff0c;圈起来的红框即为当前Chrome版本&#xff0c;我的版本就是121.0.6167.185 在json中查找自己对应ChromeDriver版本下载链接 一般教程会让你…

linux条件判断之case-in-esac

之前提到的“if...then...fi”是通过比较来判断变量的&#xff0c;如果符合状态就进行某些行为动作&#xff0c;并且通过较多层次(就是elif...)的方式&#xff0c;进行多个变量的判断&#xff0c;其也可以使用case...in...esac方式进行实现 1.case...in...esac格式 case $变量…

Linux如何设计一个线程池

在设计线程池之前&#xff0c;我们可以对线程进行简单的封装这样子在线程池中就可以少一点调用接口&#xff0c;就像搭积木一样&#xff0c;一层一层的搭上去 #pragma once#include <iostream> #include <pthread.h> #include <string> #include <functi…

【树】【异或】【深度优先】【DFS时间戳】2322. 从树中删除边的最小分数

作者推荐 【二分查找】【C算法】378. 有序矩阵中第 K 小的元素 涉及知识点 树 异或 DFS时间戳 LeetCode2322. 从树中删除边的最小分数 存在一棵无向连通树&#xff0c;树中有编号从 0 到 n - 1 的 n 个节点&#xff0c; 以及 n - 1 条边。 给你一个下标从 0 开始的整数数组…

【操作系统学习笔记】文件管理1.3

【操作系统学习笔记】文件管理1.3 参考书籍: 王道考研 视频地址: Bilibili I/O 控制方式 程序直接控制方式中断驱动方式DMA 方式通道控制方式 程序直接控制方式 关键词: 轮询 完成一次读/写操作的流程 CPU 向控制器发出读指令。于是设备启动&#xff0c;并且状态寄存器设…

2021 年 12 月青少年软编等考 C 语言一级真题解析

目录 T1. 输出整数部分思路分析 T2. 疫情集中隔离思路分析 T3. 字符判断思路分析 T4. 统计数思路分析 T5. 最大质因子思路分析 T1. 输出整数部分 输入一个双精度浮点数 f f f&#xff0c;输出其整数部分。 时间限制&#xff1a;1 s 内存限制&#xff1a;64 MB 输入 一个双精…

C++惯用法之RAII思想: 资源管理

C编程技巧专栏&#xff1a;http://t.csdnimg.cn/eolY7 目录 1.概述 2.RAII的应用 2.1.智能指针 2.2.文件句柄管理 2.3.互斥锁 3.注意事项 3.1.禁止复制 3.2.对底层资源使用引用计数法 3.3.复制底部资源(深拷贝)或者转移资源管理权(移动语义) 4.RAII的优势和挑战 5.总…

探索Pandas:数据处理与分析的利剑

在这篇文章中&#xff0c;我们将深入探讨Pandas库&#xff0c;这是一个开源的Python库&#xff0c;专为数据分析和处理而设计。Pandas提供了高效的DataFrame对象&#xff0c;使得数据清洗、分析变得简单易行。通过本篇文章&#xff0c;我们不仅会了解Pandas的核心功能&#xff…