界面效果：
image.png
image.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
div {
display: inline-block;
}
</style>
</head>
<body>
<script>
function MyButton(obj) {
let button = document.createElement('div');
button.innerText = obj.text;
if (!obj.style) {
button.style = "background:green;width:50%;height:100px";
} else {
button.style = obj.style;
}
return button;
}
HTMLElement.prototype.render = function(fElement) {
fElement.appendChild(this);
}
HTMLElement.prototype.addEvent = function(type, fn) {
this.addEventListener(type, fn, false);
}
var myConfirm = {
show: async function(obj) {
let alertDom = document.createElement('div');
let alertSp1 = document.createElement('span');
let alertSp2 = document.createElement('span');
alertDom.style = "position:fixed;width:200px;height:150px;background:#ccc;top:50%;left:50%;margin-top:-75px;margin-left:-100px";
alertSp1.style = "display:block;width:100%;height:50px;color:#000;text-align:center";
alertSp2.style = "display:block;width:100%;height:50px;color:#000;background:orange;text-align:center;line-height:50px";
alertSp1.innerText = obj.title;
alertSp2.innerHTML = obj.content;
alertDom.appendChild(alertSp1);
alertDom.appendChild(alertSp2);
body.appendChild(alertDom);
}
}
let body = document.body;
let button1 = new MyButton({
text: '触发哈哈哈',
style: 'background:red;width:50%;height:100px'
});
button1.render(body);
button1.addEvent('click', showAlert);
let button2 = new MyButton({
text: '触发await'
})
button2.render(body);
button2.addEvent('click', showAwaitAlert);
function showAlert() {
console.log('showAlert');
let confirm = myConfirm.show({
title: '我是提示',
content: '哈哈哈'
});
confirm.then(r => {
console.log('确定');
}).catch(e => {
console.log('取消');
})
console.log('我继续执行了');
}
async function showAwaitAlert() {
console.log('showAwaitAlert');
let flag = await myConfirm.show({
title: '提示',
content: '我是asyncAwait提示'
});
if (!flag) {
console.log('取消');
return;
} else {
console.log('确定');
}
console.log('我继续执行了');
}
</script>
</body>
</html
网友评论