问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

页面右上角显示特定内容的功能，每触发一次，如何叠加显示？

头像
12style
    581039

    油猴子划词翻译脚本中设置了显示翻译内容的面板，定义触发后在页面右上角显示，6秒后自动关闭，再次触发后，如何叠加显示在右上角，已显示的依次下移，分别计时6秒后关闭面板，剪切板保留最新复制内容？

    生成面板和显示的代码

    var timercon;
    function showclipboard(text) {
        server.containerDestroy();// 销毁翻译内容面板
        // 新建翻译内容面板
        var container = server.container();
        container.style.top = 0 + 'px';
        container.style.right = 0 + 'px';
        //container.style.position = 'absolute';
        container.style.position = 'fixed';
        document.body.appendChild(container);
        server.rendered.push(container);

        displaycontainer(text, container);

        clearTimeout(timercon);
        timercon = window.setTimeout(function(){ container.style.display = "none";}, 6000);
    }


    function displaycontainer(text, element) {
        element.innerHTML = text;
        element.style.display = 'block';// 显示结果
        trans = text;
        //任何结果复制到剪切板
        GM_setClipboard(text);
    }



    // 翻译server
    var server = {
        // 存放已经生成的翻译内容面板（销毁的时候用）
        rendered: [],
        // 销毁已经生成的翻译内容面板
        containerDestroy: function () {
            for (var i = this.rendered.length - 1; i >= 0; i--) {
                if (this.rendered[i] && this.rendered[i].parentNode) {
                    this.rendered[i].parentNode.removeChild(this.rendered[i]);
                }
            }
        },
        // 生成翻译结果面板 DOM （此时还未添加到页面）
        container: function () {
            var div = document.createElement('div');
            div.setAttribute('style', '' +
                             'display:none!important;' +
                             'position:absolute!important;' +
                             'font-size:4px!important;' +
                             'overflow:auto!important;' +
                             //'background:#fff!important;' +
                             'background-color:rgba(255,255,255,0.3)!important;' +
                             'font-family:sans-serif,Arial!important;' +
                             'font-weight:normal!important;' +
                             'text-align:left!important;' +
                             'color:#000!important;' +
                             'padding:0.5em 1em!important;' +
                             //'line-height:1.5em!important;' +
                             'border-radius:3px!important;' +
                             'border:1px solid #ccc!important;' +
                             //'box-shadow:4px 4px 8px #888!important;' +
                             'max-width:350px!important;' +
                             'max-height:1216px!important;' +
                             'z-index:2147483647!important;' +
                             '');
            return div;
        }
    };// 翻译server结束
    javascriptdomhtml前端
    阅读 1.6k
    1 个回答
    得票最新
    头像
    Vitech
      5031517
      ✓ 已被采纳

      无非就是外面加个div套起来垂直排列，每次生成的时候插入到队列最前面就行了。
      随便写了个例子，可以自己改改或者加点动画。这个用jquery好写，原声有点难受。

      <style>
#wrap {
  position:fixed;
  right:0;
  top:0;
  width:300px;
  padding:40px;
}
#wrap div {
  background:red;
  width:100%;
  height:200px;
  margin-bottom:20px;
}
</style>
<body>
  <button id="btn">创建通知</button>
  <div id="wrap"></div>
  <script>
    const wrapDiv = document.getElementById("wrap");
    let count = 1;

    document.getElementById("btn").onclick = e => {
      let height = Math.random()*300 + "px";
      let div = document.createElement('div');
      div.innerHTML = count++;
      let fc = wrapDiv.firstElementChild
      if (fc) wrapDiv.insertBefore(div,fc)
      else wrapDiv.appendChild(div);
      setTimeout(() => {
        div.parentNode.removeChild(div);
      },6000)
    }
  </script>
</body>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题