前言
我一开始写页面的时候,用的最多的就是 alert ,但是这只能满足简单需求,一旦你有其它的需求,就无法满足了……
比如我要实现如下的效果,这里就用到 css 相关只是,但是也并不难实现。
2021-07-28T06:08:05.png

  • CSS 代码(也就是背景框)
.tbox{
        background-color: rgba(0,0,0,0.6);
        text-align: center;
        width: 350px;
        height: 230px;
        border-radius: 10px;
        position: fixed;
        z-index: 9999;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: white;
      }
  • HTML 代码应用
<div id="tbx" style="display: none">
    <!-- 你的代码 -->
    <p>时间</p>
    <p>可以了解爱情</p>
    <p>可以证明爱情</p>
    <p>也可以推翻爱情</p>
    <p style="text-align: right;margin-right: 2em;">--- 张小娴</p>
</div>
  • JS 代码
// CSS + HTML 仅实现了输出,但咱们需要做控制,也即是什么时候显示什么时候不显示
/*
网页开始就运行 js 控制代码
延时显示 tbox_1 , 5 秒后 关闭
*/
window.onload = function(){
    // 延迟 2 秒显示
    setTimeout(() => {
        document.getElementById("tbx").style.display="block";
    }, 2000);

    // 延迟 5 秒隐藏
    setTimeout(() => {
        document.getElementById("tbx").style.display="none";
    }, 5000);
}

附上效果
动画.gif

  • 说明
  1. 代码还是比较简单的;
  2. 相关样式可以自己调试;
  • 源码附件

链接: https://pan.baidu.com/s/1_YgvZd4WUp2oSL38Q55w9g
提取码: ks5h

「 希望熬过一切,星光璀璨 」

流年小站,感谢有您的支持

「 道路坎坷,感谢有您 ---来自 anYun 的感谢 」

使用微信扫描二维码完成支付

2021-07-28
已阅:2847 人/次
快快点小手指分享吧

 
 
 
分享是一种美德 x
打开微信,右上角的"+"选择"扫一扫"
使用“扫一扫”将博文分享至朋友圈吧

本文由 anYun 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

Myssl安全认证