console 命令行工具 X clear

console

$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});

<h2>购买黄金VIP会员</h2>
<body>

<p id="p1">【不好意思！您还没有登录呦！】</p>
<button>点我</button>

	</body>

  <span>
<title>弹出登录框的实现代码</title>
<script>
function openme(){
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='block';
}
function closeme(){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}
function logo_in(){alert()
//验证
//转向...
//myform.action=""
//myform.submit()
closeme();
}
</script>
<div id="div1"></div>
<div id="div2">
<table width="30%" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center">
<tr id="m_tr">
<td><font color="#FFFFFF">欢迎登陆：</font></td>
<td align="right">
<input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;">
</td>
</tr>
<tr>
<form name="myform" method="post" >
<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150">
username: <input  type="账号" name="username" size="10">
<br>pasword:<input  type="密码" name="pasword" size="12">
<br><input type="button" name="logoin" value="登录" onClick="logo_in()">
<input type="button" name="exit" value="取消" onClick="closeme()">
</td>
</form>
</tr>
</table>
</div>
<div>
<input name="button" type="button" onClick="openme()" value="登录" >
</div>
<br>
  </span>
<table class="table">
  <caption>黄金VIP会员价格表</caption>
  <thead>
    <tr>
      <th>价格</th>
      <th>时间</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>￥15</td>
      <td>连续包月</td>
    </tr>
     <tr>
      <td>￥198</td>
      <td>一年</td>
    </tr>
     <tr>
      <td>￥58</td>
      <td>一季</td>
    </tr>
    
    
    <tr>
      <td>￥19.8</td>
      <td>一月</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">扫码支付</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">百度钱包</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">手机话费</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">激活码</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">更多</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">优惠</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
 <div id="names">

     <img src=" https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494176947389&di=34d4941729980effed0919ba425f98c5&imgtype=0&src=http%3A%2F%2Fim1.tongbu.com%2Fappicon%2Fapp%2F289%2F89%2F333206289_374DD698.jpg" alt="First slide"class="img-responsive" alt="Cinque Terre" width="100" height="100"><p>支付宝支付</p>
   <img src="http://image9.huangye88.cn/2015/06/10/49545d44bd2f31e755ef4a69e402d6d2.jpeg"alt="Second slide"class="img-responsive" alt="Cinque Terre" width="100" height="100"><p>微信支付</p>
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494771896&di=31407bfac7a27fa5bbe8387837d70bf6&imgtype=jpg&er=1&src=http%3A%2F%2Fthumb103.hellorf.com%2Fpreview%2F284773673.jpg" alt="Third slide"class="img-responsive" alt="Cinque Terre" width="100" height="100"><p>支付宝二维码</p>
  
   <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3186057124,85329069&fm=23&gp=0.jpg" alt="Third slide"class="img-responsive" alt="Cinque Terre" width="100" height="100"><p>微信二维码</p>
  
  </div>

body
{
	background-image:url("http://sc.jb51.net/uploads/allimg/141029/10-141029162T2L9.jpg");
	background-color:#cccccc;
  background-size:cover;
  background-repeat:no-repeat;
}


<body>
<style type="text/css">
  
body {
margin: 0px;padding:0
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
background: #000000;
filter:Alpha(opacity=30);
}
#div2 {
display: none;
position: absolute;
height: 100%;
width: 100%;
padding-top: 10%;
z-index: 1001;
left: 0px;
top: 0px;
}
#names{
  display:flex;
  justify-content:space-around;
  font-size:15px;
}

SOURCE

本项目引用的自定义外部资源