first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/Dlogo.js

@@ -0,0 +1,121 @@
+class Dlogo {
+    config = {
+        body: this.$("body"),
+        title: "标题",
+        content: "内容",
+        showClose: false,//true表示显示，flase是关闭
+        cancelm: "取消",
+        confirmv: "确认",
+        AgainFatherlassName: '',
+        AgainCancelClassName: '', // 取消的类名
+        AgainConfirmClassName: '', // 确定的类名
+        beforeCloseType: null,
+        cancelEvent: () => {
+
+        },
+        confirmvEvent: () => {
+
+        }
+    };
+
+    constructor(option) {
+        this.config.title = option.title || this.config.title;
+        this.config.content = option.content || this.config.content;
+        this.config.showClose = option.showClose || this.config.showClose;
+        this.config.cancelm = option.cancelm || this.config.cancelm;
+        this.config.confirmv = option.confirmv || this.config.confirmv;
+        this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
+        this.config.confirmvEvent = option.confirmvEvent || this.config.confirmvEvent;
+        this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
+        this.createDlogo()
+        this.BindClose()
+        this.cancelClear()
+        this.showCloseClear()
+
+    }
+
+    createDlogo() {
+        this.config.body.insertAdjacentHTML("beforeend", `<div class="back ${this.config.AgainFatherlassName}">
+        <div class="backg"></div>
+        <div class="pop">
+            <div class="top">
+            <div class="title">${this.config.title}</div>
+           ${
+            this.config.showClose
+                ? `<i class="iconfont icon-guanbi"></i>`
+                : `<span></span>`
+        }
+            </div>
+            <div class="content">
+            ${this.config.content}
+            </div>
+            <div class="buttom">
+            <button class="cancel ${this.config.AgainCancelClassName}">${this.config.cancelm}</button>
+            <button class="confirm ${this.config.AgainConfirmClassName}">${this.config.confirmv}</button>
+            </div>
+        </div>
+        </div>`)
+    }
+
+    createdAgainConfirm() {
+        this.config.AgainFatherlassName = 'again'
+        this.config.AgainCancelClassName = "againCancel";
+        this.config.AgainConfirmClassName = "againConfirm";
+        this.config.title = ""
+        this.config.content = "确认关闭？"
+        this.config.cancelText = "取消"
+        this.config.confirmText = "确定"
+
+        this.createDlogo()
+        this.click(".againCancel", ()=> {
+            this.DeleteDlogo(".again");
+        })
+
+        this.click(".againConfirm", ()=> {
+            this.DeleteDlogo(".back");
+            this.DeleteDlogo(".again");
+        })
+    }
+
+    /*删除元素*/
+    DeleteDlogo(came) {
+        this.config.body.removeChild(this.$(came))
+    }
+
+    /*关闭按钮被点击*/
+    BindClose() {
+        this.click(".cancel", () => {
+            this.DeleteDlogo(".back");
+            this.DeleteDlogo();
+        })
+    }
+
+    /*确认按钮被点击*/
+    cancelClear() {
+        this.click(".confirm", () => {
+            this.config.confirmvEvent();
+            this.DeleteDlogo(".back");
+        })
+
+
+    }
+
+    /*标签按钮被点击*/
+    showCloseClear() {
+        this.click(".icon-guanbi",() =>{
+            this.DeleteDlogo(".back");
+            this.createdAgainConfirm()
+        })
+
+
+    }
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    click(className, methods) {
+        this.$(className).onclick = () => methods();
+    }
+}
+
+window.Dlogo = Dlogo

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/index.css

@@ -0,0 +1,63 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}
+.pop{
+    background:dodgerblue;
+    width: 420px;
+    border-radius:3px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.top{
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    padding: 20px 20px 10px;
+}
+.title{
+    font-size: 18px;
+}
+.content{
+    font-size: 14px;
+    padding: 30px 20px;
+}
+.buttom{
+    display: flex;
+    align-content: center;
+    justify-content: flex-end;
+    padding: 10px 20px 20px;
+}
+.buttom button{
+    padding: 12px 20px;
+    margin-right: 10px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+}
+.back{
+    width: 100vw;
+    height: 100vw;
+    position: relative;
+    box-sizing: border-box;
+}
+.backg{
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.4);
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_7fkd3tbt2kd.css">
+</head>
+<body>
+<button class="op" onclick="Tchang()">点击显示</button>
+
+</body>
+<script src="Dlogo.js"></script>
+<!--<script src="tools.js"></script>-->
+<script>
+    function Tchang() {
+        new Dlogo({
+            title: "这是标题",
+            content: "这是内容",
+            showClose: true,//true表示显示，flase是关闭
+            cancelm: "取消按钮内容",
+            confirmv: "确认按钮内容",
+            cancelEvent: () => {
+                console.log("取消按钮被点击")
+            },
+            confirmvEvent: () => {
+                console.log("确定按钮被点击")
+            }
+        })
+    }
+</script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/tools.js

@@ -0,0 +1,3 @@
+function $(ClassName){
+    return document.querySelector(className);
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/Popups.js

@@ -0,0 +1,100 @@
+class Popups {
+    config = {
+        Name: $(".bj"),
+        contter: "标题",
+        iconfont: "警告",
+        neirong: "消息",
+        guanbi1: false,
+        weizhi: "RightTop",
+        iconfontEvent: () => { }
+
+    }
+
+    constructor(option) {
+        this.config.contter = option.contter || this.config.contter;
+        this.config.iconfont = option.iconfont || this.config.iconfont;
+        this.config.neirong = option.neirong || this.config.neirong;
+        this.config.weizhi = option.weizhi || this.config.weizhi;
+        this.config.guanbi1 = option.guanbi1 || this.config.guanbi1;
+        this.config.iconfontEvent = option.iconfontEvent || this.config.iconfontEvent;
+        console.log(option)
+        this.createPopups()
+    }
+
+    createPopups() {
+
+        this.config.Name.insertAdjacentHTML("beforeend",
+            `
+              <div class="back ${this.xuanzhe()}">
+                <div class="top">
+                <div class="top_left">
+                <i class="iconfont ${this.ibiaoq()}"></i>
+                <h4 class="contter">${this.config.contter}</h4>
+                </div>
+                <i class="iconfont icon-guanbi"></i>
+                </div>
+            <div class="neirong">${this.config.neirong}</div>
+                </div>`)
+
+        this.iconfontclous()
+        this.dingshi()
+
+    }
+
+
+    dingshi() {
+        if (this.config.guanbi1) {
+            setTimeout(() => this.clous(),3000)
+        }
+    }
+
+    /*关闭*/
+    clous() {
+        this.config.Name.removeChild($(".back"))
+    }
+
+    /*关闭按钮被点击时*/
+    iconfontclous() {
+        $(".icon-guanbi").onclick = () => {
+            this.clous();
+            this.config.iconfontEvent()
+        }
+    }
+    xuanzhe(shuju) {
+        switch (this.config.weizhi) {
+            case "LeftTop":
+                return shuju = "LeftTop";
+                break;
+            case "RightTop":
+                return shuju = "RightTop";
+                break;
+            case "LeftBottom":
+                return shuju = "LeftBottom";
+                break;
+            case "RightBottom":
+                return shuju = "RightBottom";
+                break;
+        }
+
+    }
+    ibiaoq(shu) {
+        switch (this.config.iconfont) {
+            case "警告":
+                return shu = "icon-icon-test";
+                break;
+            case "成功":
+                return shu = "icon-chenggong";
+                break;
+            case "错误":
+                return shu = "icon-icon-test1";
+                break;
+            case "消息":
+                return shu = "icon-xiaoxi";
+                break;
+        }
+
+    }
+   
+}
+
+window.Popups = Popups

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/index.css

@@ -0,0 +1,73 @@
+body, ul, li, p, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
+}
+.icon-xiaoxi{
+    padding-right: 10px;
+
+}
+.icon-icon-test1 {
+    color: red;
+    padding-right: 10px;
+}
+.iconfont{
+    font-size: 20px !important;
+
+}
+
+.icon-chenggong{
+    color: #00ff09;
+    padding-right: 10px;
+}
+.icon-icon-test {
+    color: yellow;
+    font-size: 20px;
+    padding-right: 10px;
+}
+
+.back {
+    width: 330px;
+    background: #ffff;
+    border: 1px solid #ebeef5;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 /10%);
+    padding: 14px 26px 14px 13px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: fixed;
+}
+.top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.top_left{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.neirong{
+margin-left: 30px;
+    padding-top: 5px;
+}
+.bj{
+    width: 100vw;
+    overflow: hidden;
+}
+.LeftTop{
+    top:0;
+    left: 20px;
+}
+.RightTop{
+    top:0;
+    right: 20px;
+}
+.LeftBottom{
+    bottom: 50px;
+    left: 20px;
+}
+.RightBottom{
+    bottom: 50px;
+    right: 20px;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2631342_lyqjl0e3hf.css">
+</head>
+
+<body>
+    <button onclick="dian()">按钮</button>
+
+    <div class="bj"></div>
+
+</body>
+<script src="utils.js"></script>
+<script src="Popups.js"></script>
+<script>
+    function dian() {
+        new Popups({
+            Name: ("bj"),
+            contter: "这是标题",
+            iconfont: "成功", //警告(wait)，成功(success)，错误(error)，消息(default)
+            neirong: "这是内容",
+            guanbi1: false,
+            weizhi: "LeftTop", //LeftTop RightTop LeftBottom RightBottom
+            iconfontEvent: () => {
+                console.log("取消按钮被点击")
+
+            }
+
+        })
+
+    }
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/utils.js

@@ -0,0 +1,3 @@
+function $(className) {
+    return document.querySelector(className)
+}