//自定义alert
function alert(text) {
//创建标签
alert_bg = document.createElement('div')
alert_box = document.createElement('div')
alert_text = document.createElement('div')
alert_btn = document.createElement('div')
textNode = document.createTextNode(text ? text : '')
btnText = document.createTextNode('确 定')
//添加css样式
addcss()
// 内部结构套入
alert_text.appendChild(textNode)
alert_btn.appendChild(btnText)
alert_box.appendChild(alert_text)
alert_box.appendChild(alert_btn)
alert_bg.appendChild(alert_box)
// 确定绑定点击事件删除标签
addEvent(alert_btn,'click',function() {
alert_bg.parentNode.removeChild(alert_bg)
})
// 整体显示到页面内
document.getElementsByTagName('body')[0].appendChild(alert_bg)
//添加动态
dongtais(5,30,20)
}
//便于添加css
function css(targetObj, cssObj) {
var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : ''
for (var i in cssObj) {
str += i + ':' + cssObj[i] + ';'
}
targetObj.style.cssText = str
}
//添加css
function addcss() {
// 控制样式
css(alert_bg, {
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'background-color': 'rgba(0, 0, 0, 0.1)',//rgba(0, 0, 0, 0.1)
'z-index': '99999',
})
css(alert_box, {
'width': '270px',
'font-size': '16px',
'text-align': 'center',
'background-color': '#fff',
'border-radius': '20px',
'position': 'absolute',
'top': '5%',
'left': '50%',
'transform': 'translate(-50%, -50%)',
})
css(alert_text, {
'padding': '20px 15px',
'border-bottom': '1px solid #ddd',
'word-wrap': 'break-word',
'word-break': 'break-all',
})
css(alert_btn, {
'padding': '10px 0',
'color': '#007aff',
})
}
//动态
function dongtais(top,headtop,foottop){
var dongtai = setInterval(function () {
top++
alert_box.style.top = top + '%'
if (top==headtop) {
clearInterval(dongtai)
dongtai = setInterval(function () {
top--
alert_box.style.top = top + '%'
if (top==foottop){
clearInterval(dongtai)
dongtai = setInterval(function () {
top++
alert_box.style.top = top + '%'
if (top==headtop){
clearInterval(dongtai)
}
},1000/60)
}
},1000/60)
}
},1000/60)
}
//添加事件
function addEvent(who,events,functions) {
who.addEventListener(events,functions)
}
