bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/index.css Normal file
View File

@@ -0,0 +1,44 @@
body{
position: relative;
}
.Popup{
width: 400px;
height: 200px;
background: aqua;
border: 3px ;
border: #ff9b9b;
display: none;
position: absolute;
top: 20px;
right: 50px;
padding: 20px;
box-sizing: border-box;
}
.block{
display: block;
}
.top{
display: flex;
width: 100%;
height: 20px;
align-items:center;
justify-content:space-between;
box-sizing: border-box;
padding-right: 10px;
}
.bottom{
display: flex;
justify-content: flex-end;
}
.bu1{
margin-right: 10px;
}
.bu2{
margin-right: 10px;
}
.back1{
background: rgba(0,0,0 0.4);
}

32
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/index.html Normal file
View File

@@ -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 type="button" class="Click">点击打开</button>
<div class="Popup">
<div class="top">
<p>提示<p>
<i class="iconfont icon-guanbi"></i>
</div>
<p>这是一段信息</p>
<div class="bottom">
<button type="button" class="bu1">关闭</button>
<button type="button" class="bu2">确定</button>
</div>
</div>
</body>
<script src="index.js">
</script>
<script>
// window.onload = function(){
// document.body.style.background="#000";
// }
</script>
</html>

21
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/index.js Normal file
View File

@@ -0,0 +1,21 @@
function $(className){
return document.querySelector(className);
}
$(".Click").onclick=function (){
$(".Popup").classList.add("block")
document.body.style.background = "rgba(0,0,0,0.4)";
}
function shanchu() {
console.log(11111)
$(".Popup"). classList.toggle("block")
document.body.style.background = "#fff";
}
$(".icon-guanbi").onclick=function () {
shanchu();
}
$(".bu1").onclick=function () {
shanchu();
}
$(".bu2").onclick=function () {
shanchu();
}

0
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/demo.css Normal file
View File

35
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/demo.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹窗插件封装</title>
</head>
<body>
<button onclick="showDialog()">点我</button>
</body>
<script src="./dialog.js"></script>
<script>
function showDialog() {
new Dialog({
title: '测试标题',
content: '这是测试内容',
cancelText: '关闭',
confirmText: '确认',
showClose: false, // true 显示，false关闭
beforeCloseType: 'confirm', // 关闭前确认，icon，cancel， confirm
confirmEvent: () => {
console.log("确定按钮被点击");
},
cancelEvent: () => {
console.log("你点击了取消按钮");
},
})
}
</script>
</html>

132
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/dialog.js Normal file
View File

@@ -0,0 +1,132 @@
class Dialog {
config = {
body: this.$("body"),
AgainFatherlassName: '',
AgainCancelClassName: '', // 取消的类名
AgainConfirmClassName: '', // 确定的类名
title: '提示',
content: '这是一段信息',
cancelText: '取消',
confirmText: '确定',
beforeCloseType: null,
showClose: false, // true 显示，false关闭
confirmEvent: () => {},
cancelEvent: () => {},
};
constructor(option) {
this.config.title = option.title || this.config.title;
this.config.content = option.content || this.config.content;
this.config.cancelText = option.cancelText || this.config.cancelText;
this.config.confirmText = option.confirmText || this.config.confirmText;
this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
this.config.showClose = option.showClose || this.config.showClose;
this.config.confirmEvent = option.confirmEvent || this.config.confirmEvent;
this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
this.createdDialog();
this.BindCancel();
this.BindConfirm();
}
createdDialog() {
this.config.body.insertAdjacentHTML(
"beforeend",
`
<div class="dialog ${this.config.AgainFatherlassName}">
<div class="dialog_background"></div>
<div class="dialog_content">
<div class="dialog_title">
<div class="dialog_text">${this.config.title}</div>
${
this.config.showClose
? `<i class="iconfont"></i>`
: `<span></span>`
}
</div>
<div class="dialog_content">${this.config.content}</div>
<div class="dialog_action">
<div class="dialog_cancel ${this.config.AgainCancelClassName}">
${this.config.cancelText}
</div>
<div class="dialog_confirm ${this.config.AgainConfirmClassName}">
${this.config.confirmText}
</div>
</div>
</div>
</div>
`
)
}
createdAgainConfirm() {
if (this.$(".again") == null) {
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.createdDialog();
this.click(".againCancel", ()=> {
this.deleteDialog(".again");
})
this.click(".againConfirm", ()=> {
this.config.confirmEvent();
this.deleteDialog(".again");
this.deleteDialog(".dialog");
})
}
}
deleteDialog(className) {
this.config.body.removeChild(this.$(className))
}
// 取消
BindCancel() {
this.click(".dialog_cancel", ()=> {
this.isShowConfirm("cancel");
if (this.config.beforeCloseType == null) {
this.config.cancelEvent();
}
})
}
// 确定
BindConfirm() {
this.click(".dialog_confirm", ()=> {
this.isShowConfirm("confirm")
if (this.config.beforeCloseType == null) {
this.config.confirmEvent();
}
})
}
// 判断如何展示确定关闭弹窗
isShowConfirm(type) {
if (this.config.beforeCloseType == type) {
this.createdAgainConfirm()
} else {
this.deleteDialog(".dialog");
}
}
click(className, methods) {
this.$(className).onclick = () => methods();
}
$(className) {
return document.querySelector(className)
}
}
window.Dialog = Dialog

45
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/index.css Normal file
View File

@@ -0,0 +1,45 @@
.bj{width: 100%;
height: 100%;
position: relative;
}
.Popup{
width: 400px;
height: 200px;
background: aqua;
border: 3px ;
border: #ff9b9b;
display: none;
position: absolute;
top: 20px;
right: 50px;
padding: 20px;
box-sizing: border-box;
}
.block{
display: block;
}
.top{
display: flex;
width: 100%;
height: 20px;
align-items:center;
justify-content:space-between;
box-sizing: border-box;
padding-right: 10px;
}
.bottom{
display: flex;
justify-content: flex-end;
}
.bu1{
margin-right: 10px;
}
.bu2{
margin-right: 10px;
}
.back1{
background: rgba(0,0,0 0.4);
}

26
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/index.html Normal file
View File

@@ -0,0 +1,26 @@
<!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>
<div class="bj"></div>
<button type="button" class="Click">点击打开</button>
</div>
</body>
<script src="index.js">
</script>
<script>
new Indexe(".bj", {
Popswitch: true,
title: "123"
}
)
</script>
</html>

40
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/index.js Normal file
View File

@@ -0,0 +1,40 @@
(function () {
class Indexe {
config = {
el: '.bj',
Popswitch: false,
title: "标题",
title2: "内容"
}
constructor(el, ope) {/*检测*/
if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
throw new Error("el参数未传");
} else {
console.log("通过检测")
}
this.config.el = el;
this.config.Popswitch = ope.Popswitch || this.config.Popswitch;
this.config.title = ope.title || this.config.title;
console.log(this.config)
this.tianjia()
}
tianjia() {
this.el.innerHTML = `<div></div>`
}
$(className) {
return document.querySelector(className);
}
}
window.Indexe = Indexe
})()
//1.检测内容
//2.向html上追加内容
//3.追加的内容等于用户自定义的内容