原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。

原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。

第一种方式:

使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值。为真或假执行某些事情)

弹出框,我就用alert()了。

补充一下:
因为要用原生js实现,原生js提供的弹出框的方式(我暂时知道四种),其中有三种都是阻塞加载的。剩下一种很多浏览器已经不支持
alert() pormpt() confirm() 都阻塞加载
showModalDialog() 很多浏览器都不支持
直接撸代码(函数节流 我在这里直接叫 上锁 和开锁)

html代码:

  <button>我是一个按钮</button>

javascript代码

 		// 设置锁
        var lock = false;
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function() {
            if (lock) {
                return;
            }
            // 上锁
            lock = true;
            alert('我是一个对话框');
            setTimeout(function() {
                // 开锁
                lock = false;
            }, 5000);
        }
我这里有一个弊端,alert是阻塞加载的。所以必须是alert的对话框弹出后,关闭对话框后,再过5秒才会执行。不过题目要求也是完成了的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 以下是一个示例代码: 在jsp页面中嵌入js代码: ``` <script language="javascript"> function showMonth() { var currentDate = new Date(); var month = currentDate.getMonth() + 1; alert("当前月份为:" + month); } </script> ``` 然后jsp页面中添加一个按钮,并绑定上面写的 showMonth 函数: ``` <input type="button" value="显示当前月份" onclick="showMonth();" /> ``` 当用户在页面上点这个按钮时,就一个对话框,显示当前的月份。 ### 回答2: 在jsp页面中嵌入js代码,我们可以使用`<script>`标签来实现。首先,在`<head>`标签中添加`<script>`标签,引入js文件。然后,在需要嵌入js代码的位置,可以直接在jsp页面中使用`<script>`标签来编写js代码。 在本例中,我直接在页面中嵌入js代码来实现功能。假设在jsp页面中有一个按钮,id为"showBtn",内容为"显示当前月份"。当点按钮时,一个对话框,显示当前月份。 首先,在`<head>`标签中添加`<script>`标签: ```html <script src="your_script_file.js"></script> ``` 然后,在jsp页面中嵌入js代码: ```html <body> <button id="showBtn">显示当前月份</button> <script> // 获取当前日期 var currentDate = new Date(); var currentMonth = currentDate.getMonth() + 1; // 月份从0开始,所以要+1 // 点按钮时触发的函数 function showDialog() { alert("当前月份为:" + currentMonth); } // 绑定按钮事件 document.getElementById("showBtn").addEventListener("click", showDialog); </script> </body> ``` 这段js代码中,我们首先获取当前日期,并通过`getMonth()`方法获取当前月份。然后,定义了一个名为`showDialog`的函数,用来对话框,显示当前月份。最后,通过`addEventListener`方法绑定按钮的点事件,当点按钮时调用`showDialog`函数。 当我们在浏览器中打开jsp页面,点"显示当前月份"按钮时,一个对话框,显示当前的月份。 ### 回答3: 在jsp页面中嵌入js代码非常简单。首先,在按钮元素上绑定一个点事件,当按钮被点时,执行相应的js代码。其次,在js代码中获取当前日期,提取月份,并将其显示在对话框中。 以下是一种实现方式: 1. 在jsp页面中添加一个按钮元素: ```html <button onclick="showCurrentMonth()">显示当前月份</button> ``` 2. 在jsp页面中嵌入js代码: ```html <script> function showCurrentMonth() { var currentDate = new Date(); // 获取当前日期 var month = currentDate.getMonth() + 1; // 获取当前月份,注意月份是从0开始计数的,所以要加1 alert("当前月份为:" + month); // 对话框显示当前月份 } </script> ``` 以上代码中,我们定义了一个名为`showCurrentMonth`的函数,该函数在按钮被点时被调用。在该函数中,我们使用`Date`对象的`getMonth()`方法获取当前月份,并将其保存在`month`变量中。为了让月份从1开始计数,我们在获取的结果上加1。最后,我们使用`alert()`方法一个对话框,其中显示当前的月份。 当用户点按钮时,上述函数被触发,对话框显示当前月份。注意,这个对话框是由浏览器提供的原生对话框。如果您想使用自定义样式或者其他功能,您可以考虑使用第三方库或者自己编写代码实现一个模态对话框

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值