您的位置：首页 > Web前端 > JavaScript

js点击隐藏和显示div

2016-12-24 14:32 399 查看

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con").style.display ="none";

}
function showtext()
{
var mychar = document.getElementById("con").style.display ="block";

}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>

商务通弹窗修改，打开网页5秒后弹窗，点击关闭，5秒后再次弹窗

function showtext()
{
var mychar = document.getElementById("bar1").style.display ="block";

}

setTimeout("showtext()",6000);//6秒
function hidetext()
{
var mychar = document.getElementById("bar1").style.display ="none";
setTimeout("showtext()",6000);//6秒
}

document.writeln("<style type=\'text/css\'>");
document.writeln(".dialog{");
document.writeln(" position: fixed;");
document.writeln(" _position:absolute;");
document.writeln(" z-index:999999;");
document.writeln(" top: 50%;");
document.writeln(" left: 50%;");
document.writeln(" display: none;");
document.writeln(" margin: -135px 0 0 -140px;");
document.writeln(" width: 280px;");
document.writeln(" height:270px;");
document.writeln(" background:#339933;");
document.writeln("} ");
document.writeln(".guanbi{ top:0px; height:25px; width:30px; right:0px; position:absolute;

cursor:pointer}");
document.writeln("</style>");
document.writeln("<div class=\'dialog\' id=\'bar1\'><span class=\'guanbi\' onclick=\'hidetext()\'></span><a href=\'/swt/\'><img src=\'/swt/1.gif\'/></a></div>");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航