欢迎登录

抖音流行的恶搞弹窗

:2018-12-16    :392 次   :27863 字   

摘要:

在抖音有一段受大家喜欢的视频就是,电脑不断弹出窗口,显示文字,按照确认就弹出来,其实是很简单的代码,没有技术含量的。本来就不打算理会,既然有人要,现在把代码放出来,大家也可以制作的。


代码:


1、电脑版比较流行的就是vbs版本的,比较简单,而且不用配置什么环境就能写成的。主要语言就是VB基础语言了,制作也比较简单,打开记事本,把下面的代码输入,下面的文字可以修改,也可以多加行。保存,然后改;【文件名.txt】改成【文件名.vbs】,保存点击就有效果了。


msgbox("你老弟帅吗?")

msgbox("是的很帅!")

msgbox("我也是这么觉得!")

msgbox("超级无敌帅!")


效果图:


image.png



2、手机版就比较复杂了,如果简单一点就是网页版的制作了,网页版的制作就涉及到环境和服务器了,代码是比较简单的,就是js弹窗的运用,高级点就是重载窗口了,难点在如何把制作好的放到网站,有站点的就不存在这个问题了,先把代码放出来。



简单版:html文件


演示:


https://xygeng.cn/666/


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body style="margin:0 auto;width:100%">
<div id="list" style="margin:0 auto;"></div>
<script>
myFunction();
function myFunction(){
	var r=confirm("娜娜美吗?");
	if (r==true){
		alert("恭喜你答对了");getdata();
	}
	else{
		alert("警告!请组织语言!再问一次");
		myFunction();
	}
}
function getdata(){
		var Data = document.getElementById('list');
		Data.innerHTML = getnoApplicationData();
	}
function getnoApplicationData(){
    var html = '<img src=\'https://cloud.xygeng.cn/?/Picture/Emoticon/006pTc3hgw1f46nicvxu2j30dw0dw0ts.jpg\' style=\"width:100%;height:100%;display:block;\"/>';
    return html;
    }
</script>

</body>
</html>


效果图:


image.png



高级版:【来自网络】


html文件


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我超帅!</title>
    <link rel="stylesheet" href="style.css">
</head>
<div id="demo"></div>
<body>
      <script src="index.js"></script>
      <script>
          new $Msg({
            content:"我帅吗?",
            type:"success",
            cancle:function(){
              let cancle = new $Msg({
                content:"再给你一次机会"
              })
            },
            confirm:function(){
              new $Msg({content:"我也是这么觉得"})
            }
          })     
      </script>
</body>
</html>


index.js文件:


/*
 *自定义弹窗
 */
//自执行函数 形成封闭的作用域 避免全局污染 
//传入windwo和document对象  相当于将window和document作为了作用域中的局部变量,
//就不需要内部函数沿着作用域链再查找到最顶层的window 提高运行效率。
(function (window, document) {
    //定义一个构造函数Msg 作为弹窗实例的构造函数。
    let Msg = function (options) {
        //执行初始化操作
        this._init(options);
    }

    //定义初始化方法 并对方法传递的参数进行初始化
    Msg.prototype = {
        _init({
            content = "", //文本内容
            type = "info", //信息类型
            useHTML = false, //是否解析html字符串
            showIcon = true, //是否展示弹窗图标
            confirm = null, //确认后得回调
            cancle = null, //取消后得回调
            footer = true, //是否显示底部的确认按钮
            header = true, //是否显示头部信息及关闭按钮
            title = "", //弹窗标题
            contentStyle = {}, //内容样式
            contentFontSize = "1.5em", //内容字体大小
            btnName = ["超帅", "不帅"] //按钮文字内容
        }) {
            //将传入的值绑定到this上 
            this.content = content;
            this.type = type;
            this.useHTML = useHTML;
            this.showIcon = showIcon;
            this.confirm = confirm;
            this.cancle = cancle;
            this.footer = footer;
            this.header = header;
            this.title = title;
            this.contentStyle = contentStyle;
            this.contentFontSize = contentFontSize;
            this.btnName = btnName;

            //执行创建元素方法
            this._creatElement();
            //显示弹窗及遮罩
            this._show({
                el: this._el,
                overlay: this._overlay
            });
            //绑定事件处理函数
            this._bind({
                el: this._el,
                overlay: this._overlay
            });
        },

        //创建弹窗元素方法
        _creatElement() {
            //创建最外层得包裹元素
            let wrap = document.createElement("div");
            wrap.className = "msg__wrap";

            //定义弹窗得两个按钮
            const [confirmBtnName, cancelBtnName] = this.btnName;

            //判断是否显示弹窗标题
            const headerHTML = this.header ?
                `<div class="msg-header">
                        <span>${this.title}</span>
                        <span class="msg-header-close-button">×</span>
                    </div>` : "";

            //判断是否显示图标
            const iconHTML = this.showIcon ?
                `<div class="msg-body-icon">
                    <div class="msg-body-icon-${this.type}"></div>
                </div>` : "";

            //判断是否显示弹窗底部按钮
            const footerHTML = this.footer ?
                `<div class="msg-footer">
                        <button class="msg-footer-btn msg-footer-cancel-button">${cancelBtnName}</button>
                        <button class="msg-footer-btn msg-footer-confirm-button">${confirmBtnName}</button>
                    </div>` : "";

            //拼接完整html
            const innerHTML = `${headerHTML}
            <div class="msg-body">
                ${iconHTML}
                <div class="msg-body-content"></div>
            </div>
            ${footerHTML}`;

            //将拼接的html赋值到wrap中
            wrap.innerHTML = innerHTML;

            //把自定义的样式进行合并
            const contentStyle = {
                fontSize: this.contentFontSize,
                ...this.contentStyle
            }

            //获取内容所属DOM
            let content = wrap.querySelector(".msg-body .msg-body-content");
            //将传过来的样式添加到contentDOM
            for (const key in contentStyle) {
                if (contentStyle.hasOwnProperty(key)) {
                    content.style[key] = contentStyle[key];

                }
            }

            //给弹窗的conntent赋值
            if (this.useHTML) {
                content.innerHTML = this.content;
            } else {
                content.innerText = this.content;
            }

            //创建遮罩层
            let overlay = document.createElement("div");
            overlay.className = "msg__overlay";

            //把dom挂载到当前实例上
            this._overlay = overlay;
            this._el = wrap;
        },

        //弹窗展现方法
        _show({
            el,
            overlay
        }) {
            //把弹窗的dom和遮罩插入到页面中
            document.body.appendChild(el);
            document.body.appendChild(overlay);

            //将弹窗显示出来 timeout进行异步处理显示动画
            setTimeout(() => {
                el.style.transform = "translate(-50%,-50%) scale(1,1)";
                overlay.style.opacity = "1";
            })
        },

        //关闭弹窗方法
        _close({
            el,
            overlay
        }) {
            //隐藏dom 
            el.style.transform = "translate(-50%,-50%) scale(0,0)";
            overlay.style.opcity = "0";
            //根据动画时间  动画完成再移除
            setTimeout(() => {

                //把弹窗的dom和遮罩移除
                document.body.removeChild(el)
                document.body.removeChild(overlay);
            }, 300);
        },

        //事件处理函数,为DOM绑定事件
        _bind({
            el,
            overlay
        }) {
            //保存当前this
            //const _this = this;

            const cancle = (e) => {
                this.cancle && this.cancle.call(this, e);
                //隐藏弹窗
                //hideMsg();
                this._close({
                    el,
                    overlay
                });
            }
            //确认弹窗
            const confirm = (e) => {
                this.confirm && this.confirm.call(this, e);
                this._close({
                    el,
                    overlay
                });
            }


            //顶部关闭按钮绑定事件
            if (this.header) {
                el.querySelector(".msg-header-close-button").addEventListener("click", cancle);
            }
            //弹窗底部两个按钮事件监听
            if (this.footer) {
                el.querySelector(".msg-footer-cancel-button").addEventListener("click", cancle);
                el.querySelector(".msg-footer-confirm-button").addEventListener("click", confirm)
            }
        }


    }

    //将构造函数暴露到window  可直接在全局作用域中访问构造函数
    window.$Msg = Msg;


})(window, document);


style.css样式文件:


/* 弹出框最外层 */
.msg__wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    transition: all .3s;
    transform: translate(-50%, -50%) scale(0, 0);
    max-width: 50%;
   
    background: #fff;
    box-shadow: 0 0 10px #eee;
    font-size: 10px;
  }
  
  /* 弹出框头部 */
  .msg__wrap .msg-header {
    padding: 10px 10px 0 10px;
    font-size: 1.8em;
  }
  
  .msg__wrap .msg-header .msg-header-close-button {
    float: right;
    cursor: pointer;
  }
  
  /* 弹出框中部 */
  .msg__wrap .msg-body {
    padding: 10px 10px 10px 10px;
    display: flex;
  }
  
  /* 图标 */
  .msg__wrap .msg-body .msg-body-icon{
    width: 80px;
  }
  
  .msg__wrap .msg-body .msg-body-icon div{
    width: 45px;
    height: 45px;
    margin: 0 auto;
    line-height: 45px;
    color: #fff;
    border-radius: 50% 50%;
    font-size: 2em;
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{
    background: #32a323;
    text-align: center;
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{
    content: "成";
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{
    background: #ff8080;
    text-align: center;
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{
    content: "误";
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{
    background: #80b7ff;
    text-align: center;
  }
  
  .msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{
    content: "注";
  }
  
  /* 内容 */
  .msg__wrap .msg-body .msg-body-content{
    min-width: 200px;
    font-size: 1.5em;
    word-break: break-all;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
  }
  
  /* 弹出框底部 */
  .msg__wrap .msg-footer {
    padding: 0 10px 10px 10px;
    display: flex;
    flex-direction: row-reverse;
  }
  
  .msg__wrap .msg-footer .msg-footer-btn {
    width: 50px;
    height: 30px;
    border: 0 none;
    color: #fff;
    outline: none;
    font-size: 1em;
    border-radius: 2px;
    margin-left: 5px;
    cursor: pointer;
  }
  
  .msg__wrap .msg-footer .msg-footer-cancel-button{
    background-color: #ff3b3b;
  }
  
  .msg__wrap .msg-footer .msg-footer-cancel-button:active{
    background-color: #ff6f6f;
  }
  
  .msg__wrap .msg-footer .msg-footer-confirm-button{
    background-color: #4896f0;
  }
  
  .msg__wrap .msg-footer .msg-footer-confirm-button:active{
    background-color: #1d5fac;
  }
  
  /* 遮罩层 */
  .msg__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    background-color: rgba(0, 0, 0, .4);
    transition: all .3s;
    opacity: 0;
  }



效果图:


image.png



    暂无评论,快来抢沙发吧!
×