简单的js弹窗+定时器代码

最新推荐文章于 2024-05-30 10:17:26 发布
最新推荐文章于 2024-05-30 10:17:26 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： web前端 文章标签： html javascript 源代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29447481/article/details/62860263
版权

<style>
          .black_overlay{  display: none;  position: fixed;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);}
          .white_content {  display: none;  position: fixed;  top: 25%;  left: 25%;  width: 50%;  height: 50%;  padding: 16px;  border: 3px solid gray;  background-color: white;  z-index:1002;  overflow: auto;  }  
</style>

 <script type="text/javascript">

        function tc() {
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block';
        }
         
        function clotc() {
            document.getElementById('light').style.display='none';
            document.getElementById('fade').style.display='none';
        }
        
        var myVar=setInterval(function(){myTimer()},3000);
        function myTimer(){
            document.getElementById("demo").innerHTML="1...";
        }
        var myVar2=setInterval(function(){myTimer2()},4000);
        function myTimer2(){
            document.getElementById("demo2").innerHTML="2...";
        }
        var myVar3=setInterval(function(){myTimer3()},5000);
        function myTimer3(){
            document.getElementById("demo3").innerHTML="3...";
        }
        var myVar4=setInterval(function(){myTimer4()},6000);
        function myTimer4(){
            document.getElementById('demo4').style.display='block';
        }
    </script>
</head>
<body>
    <button οnclick="tc()">点击弹窗</button>
    <div id="light" class="white_content">
        <p align="center" id="demo"></p>
        <p align="center" id="demo2"></p>
        <p align="center" id="demo3"></p>
           <p align="center" id="demo4" style="display: none"><button id="Button1" οnclick="clotc()">确认关闭弹窗</button></p>
    </div>
    <div id="fade" class="black_overlay">
    </div>
</body>
</html>
叶不二
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript定时器制作弹窗小广告
10-20
主要为大家详细介绍了JavaScript定时器制作一个弹窗小广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS定时弹窗(layui)
Lyours
11-09 705
setInterval(function () {//每10分钟弹窗预警处理提示 $.ajax({ type:"post", url:"请求后台url", async:false, success:function(data){ if(data.rows.length>0) { layer
办公室救星--windows定时任务弹窗提醒脚本
最新发布
m0_66237295的博客
05-30 640
windows中设置定时提醒
js 定时器 弹窗
qq_42467563的博客
10-22 1640
一次性定时器：设置一个时间，时间一到，做指定的事情，之后就销毁了 设置：var timer = setTimeout(函数, 时间)，时间单位是毫秒 清除：clearTimeout(timer)   &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt; ...
JS中弹窗效果（详细讲解）、（定时器详细讲解）
weixin_52231266的博客
12-24 1243
说一下前端中我们经常用的样式，比如说在打开网页的时候自动弹出一个提示框，还有js中比较重要的定时器，还有一些基本的js中的对象。 JS弹窗效果： 弹窗的效果对用户具有提示效果： 提示框分为三种： 警告框 提示框 确认框 <script type="text/javascript"> // 确认框 window.confirm("确认"); // alert("haha");警告框 // 在前端中所有的输入框，输入的结果都是字符串类型，如果没有输入默认是空字符串
js 实现 定时弹出窗口
03-30
js 实现 定时弹出窗口! 值得下载看看!资源免费,大家分享!!
JS模仿关闭360助手弹窗提示的代码.zip
11-19
这个"JS模仿关闭360助手弹窗提示的代码.zip"文件包含了关于如何用JavaScript实现这一功能的相关资料。通常，这样的代码会涉及到DOM操作、事件监听以及可能的定时器来模拟用户的交互行为。 首先，我们需要理解DOM...
js+css3图片3D倾斜布局点击弹窗放大预览代码
12-30
总结起来，"js+css3图片3D倾斜布局点击弹窗放大预览代码"项目是一个结合了CSS3高级特性和JavaScript交互设计的实例，它展示了如何通过现代Web技术实现创新的用户体验。通过学习和理解这个项目，开发者可以提升自己在...
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
10-22
JavaScript中的定时器是Web开发中不可或缺的工具，用于在特定时间后执行代码或者周期性地重复执行代码。这里主要讨论的是`setTimeout`和`setInterval`这两个方法。 首先，`setTimeout`函数允许开发者指定一段代码在...
js实现定时弹出广告效果
喜欢藏风里
05-28 1258
获取图片的元素对象(document.getElementById(“”)) 隐藏图片：display：none 定时操作：setInterval(“显示图片的函数”，3000); 清除定时操作：clearInterval(定时器标识); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .images
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
05-09
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
一个定时提醒的小工具（附代码）
09-13
上网时间长了，大家可能觉得眼疼，脖子疼。这款定时提醒小工具可能会帮到大家自制。但要做到真正的自制还需要大家自觉
js时间定时器setTimeout&setInterva
qq_45367710的博客
05-06 513
js时间定时器setTimeout&setInterva 1.延时性的定时器 setTimeout 只会执行一次 setTimeout(function() { alert('我是延时3秒执行的弹窗') }, 3000); 执行后效果 2.间隔型定时器 setInterval 每间隔一段时间(time)就会执行一次 setInterval(function(){ ...
定时器弹框用js表现
Anansoul的博客
01-09 379
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定时器弹框&lt;/title&gt; &lt;style type="text/css"&gt; .pop{ width:
Js利用Div自定义提示框弹窗+定时器
脑壳疼
05-30 1415
Html代码： <style type="text/css"> .alertDivClass { position: absolute; z-index: 9999; width: 350px; height: 170px; display...
前台js页面定时显示弹窗消息提示
ghjzzhg的博客
08-18 5445
经常写前台js可能会遇到的代码 // 页面加载后 右下角 弹出窗口 /**************/ window.setTimeout(function(){ $.messager.show({ title:"消息提示", msg:'欢迎登录，超级管理员！ 联系管理员', timeout:5000 }); },3000);
tip消息定时弹窗功能 核心代码
weixin_44671184的博客
04-16 166
for(var i = 0 ; i < 5 ; i++){ var j = 0; var arr= [1,2,5,7,8]; 　　setTimeout(function(){ console.log(arr[j ++]); 　　},i*3000); }
定时器定时关闭弹窗 js
05-11
然后，在弹窗显示时，使用 `setTimeout` 函数设置一个定时器，在指定的时间后执行关闭弹窗的操作。 下面是一个示例代码： ```javascript // 弹窗的引用 var popup = document.getElementById("popup"); // 显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值