首页 > 编程语言 >JavaScript 实现浏览器级别的弹窗提示

JavaScript 实现浏览器级别的弹窗提示

时间:2024-01-28 15:33:08浏览次数:27  
标签:浏览器 提示 JavaScript lastAlertTime localStorage 级别 弹窗

可放在网页任何位置,以下是代码:

1.每次打开都会弹出提示

<script>
    // 在页面加载时触发警告框
    window.onload = function () {
        alert('这是浏览器级别的弹窗提示!');
    };
</script>
 

2.打开只弹出一次,刷新网页不会弹出,清理浏览器缓存会再次弹出

<script>
    // 检查是否已经显示过提示
    if (!localStorage.getItem('hasShownAlert')) {
        // 在页面加载时触发警告框
        window.onload = function () {
            alert('这是浏览器级别的弹窗提示!');
            // 将已显示的状态存储到localStorage
            localStorage.setItem('hasShownAlert', 'true');
        };
    }
</script>
 

3.打开弹出一次,24小时后还会弹出,以此类推

<script>
    // 获取当前时间
    var currentTime = new Date().getTime();

    // 获取上次提示的时间,如果没有则默认为0
    var lastAlertTime = localStorage.getItem('lastAlertTime') || 0;

    // 计算距离上次提示的时间间隔(毫秒)
    var timeDiff = currentTime - lastAlertTime;

    // 检查是否已经在24小时内显示过提示
    if (timeDiff > 24 * 60 * 60 * 1000) {
        // 在页面加载时触发警告框
        window.onload = function () {
            alert('这是浏览器级别的弹窗提示!');

            // 将当前时间存储到localStorage
            localStorage.setItem('lastAlertTime', currentTime);
        };
    }
</script>
 

标签:浏览器,提示,JavaScript,lastAlertTime,localStorage,级别,弹窗
From: https://www.cnblogs.com/xytz/p/17992916

相关文章

  • JavaScript DOM对象的尺寸和位置详解
    在DOM对象操作中,其尺寸和位置也是DOM的核心内容,因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作,特别是js动画效果。一、关于DOM对象的尺寸和位置介绍DOM对象的尺寸和位置的属性DOM对象的属性描述obj.scrollWidth和obj.scrollHeightDOM对象的内部实......
  • JavaScript DOM之Cookie详解
    cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。一、什么是cookie随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,比......
  • JavaScript DOM对象的尺寸和位置详解
    在DOM对象操作中,其尺寸和位置也是DOM的核心内容,因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作,特别是js动画效果。一、关于DOM对象的尺寸和位置介绍DOM对象的尺寸和位置的属性DOM对象的属性描述obj.scrollWidth和obj.scrollHeightDOM对象的内部......
  • JavaScript DOM之Cookie详解
    cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。一、什么是cookie随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,......
  • 完美解决 - 前端发版后浏览器缓存问题
    一、简介开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了。浏览器缓存(BrowserCaching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面......
  • 关于javascript的一些笔记(一)
    在script标签内使用import的时候,必须在script标签加上type=“module”当使用script标签加上type="module"的时候,是当所有模块都加载进来才进行工作的,也就是如果html在script标签下面也是可以正常运行的,他是后解析的当使用script标签加上type="module"的时候,script标签里面......
  • Google浏览器Provisional headers are shown. Disable cache to see full headers.
    Google浏览器Provisionalheadersareshown.Disablecachetoseefullheaders.问题解决方法勾选禁用缓存,刷新成功......
  • javascript replaceall 正则表达式
    varstr="dogdogdog";varstr2=str.replace(/dog/g,"cat");console.log(str2);参考:https://www.jb51.net/article/23762.htm?tdsourcetag=s_pcqq_aiomsgstr="dogdogdog12";str=str.replace(newRegExp("[d]","g......
  • edge浏览器中GPT方法
    1、edge浏览器2、打开扩展3、打开《打开MicrosoftEdge加载项》(需开启w网)**4、搜索“movetab”。5、获取**《Movetab新标签页(ChatGpt免费)》6、扩展——管理扩展——启动Movetab7、打开新标签,即出现ChatAI.参考:......
  • 物联网浏览器(IoTBrowser)-顶尖OS2电子秤协议实现
    本教程基于  物联网浏览器(IoTBrowser)-Web串口自定义开发 ,详细的过程可以翻看之前的文章。本篇以实现顶尖OS2系列电子秤协议对接,并集成到IoTBrowser平台。由于没有找到OS2协议的官方文档,用串口助手抓包分析了一下,简单封装了一下实现代码有点潦草。所有的串口或者需要实时数......