Web 页对话框，可拖动，可自动关闭

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>Web 页对话框</title>
<style>span,table{font-size:10pt;margin:0pt}</style>
<body onmousemove=move1()>
<table id=table1 bordercolorlight=#d8d0c8 bordercolordark=#808080 border=2 style=display:block;position:absolute;width:400;height:257;left:100;top:50;background-color:#c0c0c0;>
<tr><td style=vertical-align:top>
<span id=span1 onselectstart="return false" style=cursor:nw-resize;width:400;background-color:#002468 onmousedown=down1() onmouseup=up1() style=color:white>&nbsp;Tip of the day -- Web 页对话框
<span style=width:157;height:8;background:#002468></span>
<span id=x style=color:black;background:#d8d0c8;width:18;height:8;vertical-align:middle;text-align:center;padding:0;margin:2;cursor:hand;border-style:outset;border-width:2 onclick=closewin()>X</span></span>
<br>
<span style=width:10;background-color:#c0c0c0;height:160></span>
<span id=span2 style=border-style:solid;border-width:1;border-color:#808080;width:60;background-color:#808080;height:160><br>&nbsp;&nbsp;<b><font color=white style=cursor:help onclick='alert("大家随便拿去用哦^o^")'>帮助</font></b>
<br><br><br><br><br><br><br><br>
<span style=color:white; id=num>&nbsp;&nbsp;1/5</span>
</span>
<span style=border-style:solid;border-width:1;border-color:#808080;width:320;background-color:white;height:60;position:absolute;><br><h3><b>&nbsp;&nbsp;你知道吗...</b></h3></span>
<span id=call style=border-style:solid;border-width:1;border-color:#808080;width:320;background-color:white;height:100;text-align:center;>
<br><span id=message style=width:270;height:70;background:white>大家好，我是dennisboys</span>
</span>
<br><br>
<span>&nbsp;&nbsp;<input id=check1 type=checkbox checked onclick=checkone() onfocus=this.blur()>&nbsp;自动翻帖</span>
<span style=width:155;height:20;background:#c0c0c0></span>
<span><input type=button value="下一帖" style=background-color:#c0c0c0 onclick=nextmsg() onfocus=this.blur()></span>
<span><input type=button value="关闭" style=background-color:#c0c0c0 onfocus=this.blur() onclick=closewin()></span>
</td></tr>
</table>
</body>
<script> 
var i=1
var timer1
var msg=new Array();
msg[0]=""
msg[1]="大家好，我是dennisboys"
msg[2]="我非常喜欢javascript"
msg[3]="51js真是一个非常好的地方"
msg[4]="我以后会常来的"
msg[5]="就说到这吧，886"
 
function nextmsg()
{
num.innerText="  "+i+"/5"
message.innerText=msg[i]
i++
if(i>5)i=1
clearTimeout(timer1)
check1.checked=false
}
 
function checkone()
{
if(check1.checked==true)
 {
 num.innerText="  "+i+"/5"
 message.innerText=msg[i]
 i++
 if(i>5)i=1
 timer1=setTimeout("checkone()",2000)
 }else{clearTimeout(timer1)}
}
 
checkone()
 
var count=0
function down1()
{
cleft=table1.style.pixelLeft
ctop=table1.style.pixelTop
cx=event.clientX
cy=event.clientY
count=1
}
 
function move1()
{
if(count==1)
 {table1.style.pixelLeft=cleft+event.clientX-cx
 table1.style.pixelTop=ctop+event.clientY-cy}
}
 
function up1()
{
count=0
}
 
function closewin()
{
table1.style.display='none'
}
 
</script>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Web 页对话框，可拖动，可自动关闭

分类

网站常用

描述

由Js实现的网页WEB对话框，鼠标可随意拖动改变位置，类似于有些软件初次运行时候弹出的每日提示，里面有文字在循环变化，时间到自动关闭。