网站弹窗公告代码、网站的弹窗 收藏 0

[按键精灵]打开脚本时跳出公告弹窗，公告内容及是否弹窗远程可控

大家好，我是公众号3分钟学堂的郭立员~

今天内容是公告弹窗，用于脚本更新后的提示，如下图：

实现这个功能的原理有这么几个：

①下拉框能够自动执行选择响应的函数

这一点是前提条件，就是说打开脚本后，如果有界面有下拉框，那么下拉框写的选择响应函数代码会自动执行，无需手动点击触发，这样能达到自动弹窗的效果。

②读取服务器文本

通过url.get命令获取服务器上的文本内容，在内容中包含指定控制的字符，或者对应的键值对，还有公告信息内容

③“解析”文本内容中的控制字符（键值对）

这一步是代码的核心内容，通过解析文本内容来控公告弹窗的状态

④弹窗命令

Dialog.MsgBox

⑤本地存储来判断是否首次弹窗

原理就是这些，说一下实现步骤

①在界面加一个下拉框，用于自动弹窗代码的启动

②准备一个文本，内容如下

{\”onoff\”:true,\”first\”:true,\”msg\”:\”v1.003版本更新内容：\\n\\n 1.增加了公告弹窗\\n 2.公告内容可以远程控制\”}

包含3组键值对，分别是控制是否弹窗、相同公告是否只弹出一次、公告的内容。

这个文本放到服务器上，每次只需要修改文本内容，就可以控制脚本弹窗。

③服务器文本内容的解析

读取内容onoff 如果是true，说明脚本运行弹窗

first，如果是true，代表每次更新内容，公告弹窗只弹出一次

msg是公告更新的内容

④判断是否弹窗过

这一步是基于同一更新内容弹窗弹出次数的，如果是只弹出一次，那么就需要设备在本地记录一下，已经弹出过了。

下面直接放我的范例代码：

需要注意的地方：

我们公告内容通常都是包含汉字的，但是由于utf8编码的汉字，如果直接用文本保存会有bom头，在读取时会在内容开始位置多一个问号，这个问题会导致读取键值的错误。

解决方法2个思路：

①使用第三方的文本编辑器，比如notepad+

②去掉多出来的问号，比如正则匹配，只保留{}内的东西，或者用删除命令删除首个字符。

还有关于没有服务器的问题，免费的在线文档也行，比如石墨文档、腾讯文档等等，

这期文章主要给大家提供一个“云控”的思路。

好了，内容就这些，又多了一个花里胡哨的功能，如果觉得还行帮忙点个赞~

=正文完=

VUE前端编程：简单实现一个通用等待弹窗

在后端服务调用等待时，为防止前端误操作，一般会在前端实现一个等待弹窗，今天简单实现了一个，效果如下图：

作用嘛，一个是遮罩前端页面，二是提供信息提示，告知用户正在做什么操作，用了多长时间等等。

实现方式如下：

实现一个hander，用以跟踪和监控弹窗事件ON-PENDING，这个Handler需要在main.js中注册并和EventBus关联，代码如下图所示，

pendingHandler.eventBus=Vue.prototype.$EventBus;

Vue.prototype.$pendingHandler=pendingHandler;

let main=new Vue({

router,

store,

render: h => h(App)

}).$mount(\’#app\’)

main.$pendingHandler.startMonitor();

用全局弹窗（可以参考之前我写的全局弹窗实现）封装一个弹窗组件，弹窗中实现一个计时器和一些必要的操作信息，这里我还引入了一个AntD的spin，大家可以视实际需要加入自己想要的信息。

注意，这里这个组件要跟踪OFF-PENDING实践，用以关闭弹窗，代码如下：

mounted(){

this.$EventBus.$on(\’OFF-PENDING\’,this.onClosePendingDialog);

this.start();

this.$emit(\’onUnenableActions\’);

},

beforeDestroy(){

this.$EventBus.$off(\’OFF-PENDING\’)

}

在需要调用API时，可以进行弹窗的调用，并在回调完成时关闭弹窗。代码如下图所示：

到这里为止，功能实现完毕了，但感觉还是有改进的空间，如在Axios的上做通用的显示和终止弹窗等等。我个人水平有限，有很多地方考虑不周，大家如果有好的方案可以多多交流。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com