单击生成div,定时器自动隐藏

最新推荐文章于 2022-10-27 13:49:30 发布
最新推荐文章于 2022-10-27 13:49:30 发布
阅读量554 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myvanguard/article/details/52887574
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script>
        function alertDiv() {
            var div = document.getElementById('t_area');
            if (div.style.display == 'block') {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        };
        function hideDiv() {
            var div = document.getElementById('t_area');
            div.style.display = 'none';
        }

        var timer;

        function mouseOver() {
            clearTimeout(timer);
            var div = document.getElementById('t_area');
            div.style.display = 'block';
        };
        function mouseOut() {
            var div = document.getElementById('t_area');
            timer = setTimeout(function () {
                div.style.display = 'none';
            }, 1000);
        };
    </script>
</head>
<body>
<button type="submit" class="btn btn-success J_search" id="t_con" onclick="alertDiv()"
                    ondblclick="hideDiv()" style="background-color: #337ab7">高级搜索
            </button>
<div class="sousuo" style="display:none; width:auto ;height:90px;" id="t_area" onmouseover="mouseOver()"
             onmouseout="mouseOut()"></div>
</body>
</html>
学习急先锋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用定时器移动div
weixin_46907923的博客
03-20 335
记住：移动元素都是移动元素的定位left 和top的值 步骤： 1 .获取元素 2.设置全局的盒子的left值 css设置多少 var 多少 3.添加点击事件 点击button 移动div html代码： <style> #box { position: absolute; top: 100px; left: 100px; width: 100px;
问题：关于坛友的一个定时重复显示和隐藏div的实现
淡忘~浅思
09-12 2094
需求：打开页面只看到DIV2，等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒，代码如下： html+css: 1: <!DOCTYPE HTML> 2: <html> 3: <head> 4: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5: <title>Test</title> 6:
js定时隐藏div
weixin_34132768的博客
04-23 248
js定时隐藏div（向右上角滑动隐藏） <html><head><style>.tab{border:1pxsolid#f00;width:400px;height:400px;background:#360;margin:auto;padding:0px;...
蓝桥杯开发板CT107D---使用定时器中断动态刷新数码管的消隐
QWQ_DIODA的博客
03-12 1465
CT107D开发板的定时器中断刷新数码管的消隐 名词 位选：选择第几个数码管亮 段暄：选择数码管亮什么内容 原理 （定时器中断刷新数码管原理基于金沙滩51单片机的教程，不做过多解释 ） 数码管在动态刷新过程中，可能存在本应不亮的地方发生微微的弱光，这种情况该怎么办呐？ 造成这种情况的原因是，程序没执行一次位选片选的刷新，下一次刷新P0原本的数据就会干扰位选段选。 所以我们需要在刷新前进入段选，写入P0=0xff，提前先使数码管阴极的锁存器变成全暗状态，这样残留数据就难以干扰位选段选 代码 void SMG_
巧用定时器，实现鼠标事件中层的显示与隐藏
探索者
10-22 300
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> window.onload = function () { var oDiv1 = document.getElementById...
div内容自动滚动,自动生成随机颜色
01-05
本话题主要涉及两个关键知识点：div内容自动滚动和HTML自动生成随机颜色。这两个特性在创建动态网页和个性化界面时非常有用。 首先，我们来讨论“div内容自动滚动”。在网页设计中，`div`元素是一个非常基础且重要...
基于JQuery的浮动DIV显示提示信息并自动隐藏
10-28
总结起来，这个基于jQuery的浮动DIV提示信息功能，通过简单的JavaScript代码实现了动态创建、定位、显示和自动隐藏提示信息，提高了用户体验。在实际项目中，可以根据需求调整样式和时间，以适应不同的应用场景。
js实现的点击div区域外隐藏div区域
10-25
主要介绍了通过js实现点击div区域外隐藏div区域，原理及示例代码如下
Div自动滚动到末尾的代码
09-06
这就是“Div自动滚动到末尾”的功能。本文将详细讲解如何实现这一功能，并提供相关的代码示例。 首先，我们需要在HTML中创建一个`<div>`元素，设置其`overflow`属性为`auto`或`scroll`，以便它具有滚动条： ```...
div中英文无法自动换行的解决办法
12-11
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远...div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
js实现定时隐藏div
12-17
js实现定时隐藏div层，任你设置时间，时间一到立即隐藏
js控制某个div在页面加载完成5秒后隐藏
weixin_30483013的博客
03-07 546
<div id="k">测试</div><script>setTimeout("document.getElementById('k').style.display='none'",5000);</script> 转载于:https://www.cnblogs.com/l-zl/p/6515711.html
定时器的应用——div向右移动
mantou_riji的博客
04-09 935
点击按钮div向右移动 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style> * { margin: 0; padding: 0; } #box1 { width: 100px; height: 100px; backgr
js-定时器的应用，按键div控制向左移动
weixin_47295886的博客
10-27 987
封装一个左右移动的函数。
定时器---移动元素div
jifubu6013的博客
03-26 700
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; div{ width:200px; height: 100px;
定时器应用-改变div各种样式
wuxiao18的博客
07-28 678
可以让韩商言测手速哦，哈哈哈(改一下实现样式就行了) div可以前进、后退、上、下、变宽、变窄..js /* var timer;时 * 定时器的标识在全局中保存 * 所有的执行正在执行的定时器都在这保存，这样的话两个盒子不能同时进行动画演示 * */ //因此更改为了obj.timer //创建可以实现简单动画的函数 ...
定时器--div自动移动
weixin_40329367的博客
07-03 1533
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;div自动移动&lt;/title&gt; &lt;/head&gt; &lt;body style="padding: 0p
html计时器控制div显示,使用计时器显示和隐藏多个div
weixin_39637545的博客
06-15 333
好吧，我试图模拟div已经存在了：123​messagecontainer中的div默认是隐藏的(不显示)：// in your css#messagecontainer > div {display: none;}​现在在我们的脚本中，我们创建一个每隔15秒运行一次的间隔，将前一个div设置为none，将当前div设置为display block：var top_level_div = d...
单击按钮让div定时器缩放运动
最新发布
09-08
通过JavaScript代码来实现在按钮单击时让一个div元素使用定时器实现缩放运动。首先，我们需要在HTML文档中定义一个div元素和一个按钮，例如： ```html <div id="myDiv">这是一个div元素</div> <button onclick="startAnimation()">点击开始动画</button> ``` 然后，在JavaScript代码中编写相关的函数实现动画效果。我们可以使用CSS的transform属性来实现div元素的缩放效果。以下是一种实现方式： ```javascript function startAnimation() { var div = document.getElementById('myDiv'); var scale = 1; // 初始缩放比例 var step = 0.02; // 每次缩放的步长 // 创建定时器，每隔10毫秒执行一次动画 var timer = setInterval(function() { scale += step; // 更新缩放比例 div.style.transform = 'scale(' + scale + ')'; // 应用缩放效果 // 当缩放比例达到某个阈值时停止动画 if (scale >= 2) { clearInterval(timer); // 清除定时器 } }, 10); } ``` 在上述代码中，startAnimation函数会在按钮单击时被调用。函数内部首先获取到要缩放的div元素，并初始化缩放比例和每次缩放的步长。然后，通过setInterval函数创建一个定时器，每隔10毫秒执行一次动画。在每次定时器的执行函数中，更新缩放比例并应用到div元素的transform属性上，实现缩放效果。当缩放比例达到阈值2时，清除定时器，停止动画。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值