js在弹框上设置一个button,打开弹窗第一次点击那个按钮,每次关闭后打开点击那个按钮都会打印是第一次点击
时间: 2024-02-17 07:00:25 浏览: 16
你可以在打开弹窗时,检查 `localStorage` 中是否存在标志位,如果不存在,就认为是第一次打开,然后设置标志位。在点击按钮时,也可以检查标志位,如果是第一次点击,就打印提示信息,并更新标志位。
关闭弹窗时,可以将标志位从 `localStorage` 中删除,这样再次打开弹窗时就会认为是第一次打开,从而可以再次触发提示信息。
示例代码如下:
```js
// 判断是否是第一次打开弹窗的函数
function isFirstOpen() {
var flag = localStorage.getItem('isFirstOpen');
if (!flag) {
console.log('这是第一次打开弹窗!');
localStorage.setItem('isFirstOpen', true);
}
}
// 判断是否是第一次点击按钮的函数
function isFirstClick() {
var flag = localStorage.getItem('isFirstClick');
if (!flag) {
console.log('这是第一次点击按钮!');
localStorage.setItem('isFirstClick', true);
}
}
// 删除标志位的函数
function clearFlags() {
localStorage.removeItem('isFirstOpen');
localStorage.removeItem('isFirstClick');
}
// 打开弹窗时检查是否是第一次打开
isFirstOpen();
// 给按钮绑定点击事件
var btn = document.getElementById('btn');
btn.addEventListener('click', isFirstClick);
// 关闭弹窗时删除标志位
window.addEventListener('beforeunload', clearFlags);
```
注意:关闭弹窗时使用 `beforeunload` 事件可以确保在弹窗完全关闭之前删除标志位。同时,如果用户在弹窗中进行了一些操作(比如填写了表单),并且没有提交数据,那么关闭弹窗时可能会弹出提示框,询问用户是否保存修改。如果用户选择了取消,那么弹窗不会关闭,标志位也不会被删除。因此,这种方法并不是完美的解决方案。