JS使用定时器+display属性实现弹窗效果

最新推荐文章于 2023-07-06 12:59:53 发布
最新推荐文章于 2023-07-06 12:59:53 发布
阅读量374 收藏
点赞数 2
文章标签： JavaScript 动态提示 setTimeout CSS样式 事件处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JingY999/article/details/124726466
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	#toast {
	color:rgb(11,90,22);
	position:absolute;
	bottom:50%;
	left:50%;
	display:none;
	}
</style>
</head>
<body>
	<input  type="button" id="toast" value="">
	<input type="button" value="正常" onclick="correct()">
	<input type="button" value="异常报错" onclick="error()">

<script type="text/javascript">
function toast(text,time){
	document.getElementById("toast").value=text;
	document.getElementById("toast").style.display="inline-block";
	setTimeout(function(){
		document.getElementById("toast").style.display="none";	
	},time);

}
function correct(){
	toast("成功啦",1000);
	}
function error(){
	toast("异常报错喽",1000);
	}
</script>
</body>
</html>

jyyr23
关注
js 定时器 弹窗
qq_42467563的博客
10-22 1651
一次性定时器：设置一个时间，时间一到，做指定的事情，之后就销毁了 设置：var timer = setTimeout(函数, 时间)，时间单位是毫秒 清除：clearTimeout(timer)   &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt; ...
js 实现 定时弹出窗口
03-30
js 实现 定时弹出窗口! 值得下载看看!资源免费,大家分享!!
使用JS定时弹出广告效果
Christina_cyw的博客
02-26 333
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="../js/hide.js" type="text/javascript"></script> </head> <body> <div> <img src=
JS实现定时弹出广告
weixin_30622107的博客
07-27 240
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现定时弹出广告</title> <script type="text/javascript"> var ...
使用JS定时弹出广告
weixin_30556959的博客
04-11 327
使用js实现定时广告弹出 我们可以使用js来实现广告的定时弹出与消失，在介绍思路前，先学习一个css样式：display, display:block,以块级的元素方式显示; display:none,不显示元素，这其实就是广告的弹出与隐藏的原理。现在来简单介绍一下思路。 第一步：找到要显示和隐藏的标签，添加id方便使用javascript时能很快找到该标签，例如： <...
JavaScript实现简单的弹窗效果
10-15
总结来说，这个JavaScript弹窗效果的实现主要依靠CSS的动画和JavaScript的定时器功能。通过结合CSS的`@keyframes`规则定义动画，以及JavaScript的DOM操作和事件监听，我们可以创建出动态且具有交互性的弹窗效果。这...
DIV+CSS+JS层模拟弹窗MSG
06-25
在网页设计和开发中，"DIV+CSS+JS层模拟弹窗MSG"是一个常见的技术应用场景，主要用于实现网页上的消息提示、用户交互反馈等效果。这种技术利用HTML的`<div>`元素作为弹窗的基础结构，CSS来控制弹窗的样式和布局，而...
javascript实现的右下角弹窗实例
10-24
这个实例不仅向我们展示了一个简单的页面元素动画效果，而且还演示了如何使用JavaScript定时器函数`setInterval`来控制动画效果。此外，还涉及到使用`clearInterval`来停止定时器和使用`parseInt`来获取和转换数值等...
JS非Alert实现网页右下角“未读信息”效果弹窗
10-23
为了实现一个在网页右下角动态显示“未读信息”的效果弹窗，我们可以通过使用JavaScript和CSS样式来达到这一目的。整个过程主要分为以下几个知识点： 1. **HTML结构**：首先需要一个HTML容器来作为弹窗的基础结构。...
js 右下角弹窗效果代码(IE only)
10-29
例如，使用了函数（function），如`$(obj)`用于获取DOM元素，`pop(obj)`用于动态调整弹窗的高度，以及`runtimer(obj)`用于启动一个定时器。 2. DOM操作技巧：代码展示了如何通过JavaScript操作DOM元素，包括获取...
用JS来控制DIV样式的display属性
01-08
用JS来控制DIV样式的display属性 这上我以前做一个留言本的 一个弹出登陆模块 我根据你的需求稍做改变，你可以自己改一下就可以用
js实现定时弹出广告效果
喜欢藏风里
05-28 1285
获取图片的元素对象(document.getElementById(“”)) 隐藏图片：display：none 定时操作：setInterval(“显示图片的函数”，3000); 清除定时操作：clearInterval(定时器标识); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .images
JS中弹窗效果（详细讲解）、（定时器详细讲解）
weixin_52231266的博客
12-24 1284
说一下前端中我们经常用的样式，比如说在打开网页的时候自动弹出一个提示框，还有js中比较重要的定时器，还有一些基本的js中的对象。 JS弹窗效果： 弹窗的效果对用户具有提示效果： 提示框分为三种： 警告框 提示框 确认框 <script type="text/javascript"> // 确认框 window.confirm("确认"); // alert("haha");警告框 // 在前端中所有的输入框，输入的结果都是字符串类型，如果没有输入默认是空字符串
css通过display:block实现侧边栏隐藏弹出效果
最新发布
weixin_51828648的博客
07-06 609
6、给div设置hover效果，当鼠标移入时让dispiay的值变为block,从而让元素显示出来。7、最后小火箭通过jqurey方法点击实现返回顶部效果（不是重点，比较简单，实现看代码）3、通过定位让伪类标签覆盖在div上，将图标作为背景图放进去（这里准备了两张背景图）2、div添加伪类标签::befor和::after（综上，通过伪类标签、display属性、hover效果实现纯css控制元素的隐藏和显示。通过伪类标签、display属性、hover效果实现纯css控制元素的隐藏和显示。
html display弹窗,html实现弹窗
weixin_39756696的博客
06-20 272
上午闲来无事，用html及原生js写个弹窗，供参考。body{margin: 0px;}.zhezhao{position: fixed;left: 0px;top: 0px;background: #000;width: 100%;height: 100%;opacity: 0.5;}.tankuang{position: relative;background: #fff;width: 50%...
使用JavaScript实现动态效果
罗彬桦的博客
02-02 1933
使用JavaScript实现动态效果 效果图： 就是把 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style
JS通过display属性实现DOM元素动态显示和隐藏
m0_46814663的博客
05-01 1963
如果在开发过程中不适合使用display属性实现动态显示或隐藏的需求，可以看一下下面这篇文章，采用visiblity属性实现。前言：因为笔者在开发过程中涉及到表格内容需要根据不同显示不同的内容，部分。（实际上不能称为隐藏，页面根本不渲染该DOM元素），且不占用原来的空间，因此使用。属性来实现需求功能。
JS通过操作Element的Css来实现隐藏和显示（本示例只有隐藏）
独孤听雨
12-15 2285
html> html lang="en" xmlns="http://www.w3.org/1999/html"> head> meta charset="UTF-8"> title>Collapsed Form Elementstitle> style> .label{ width: 400px; margi
三种CSS方式实现弹出窗口（popup window）
热门推荐
莫小猪的菜鸟进阶路
02-21 1万+
1. 使用display: flex；进行上下居中布局 在容器里面添加以下几行css语句 display: flex; justify-content: center; align-items: center; 注意： 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 <!DOCTYPE html> <html lang=...
使用JavaScript定时器创建弹窗广告教程
"本文通过JavaScript实现了一个定时器触发的弹窗广告示例，代码包括HTML、CSS和JavaScript部分，展示了如何创建一个具有特定样式的弹窗，并使用定时器控制其显示时间。" 在Web开发中，JavaScript定时器是常用的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值