前端js案例

時間 2019-11-29

原文原文鏈接

系統登陸首頁經常使用案例：javascript

<body class="signin" >
<audio src="/imgUpload/music.mp3" autoplay="true" loop="0"></audio> <!--背景音樂 -->
　　<div class="signinpanel" id="signinpanel">
　　　　<div class="row" id="row">
    　　　　<form id="signupForm">
                    <h4 class="no-margins">登陸：</h4>
                    <input type="text"     name="username" class="form-control uname"   placeholder="用戶名" />
                    <input type="password" name="password" class="form-control " placeholder="密碼"   />
                    <button class="btn btn-success btn-block">登陸</button>
                     <a href="/reset"><input style="width: 100%" type="button" class="btn btn-success "value="重置密碼"></input></a>
           </form>　    
　　　　</div>
    <div id="message" ><h3 style="color:red">系統有大的更新，請手動清理瀏覽器緩存，以避免影響正常功能使用！</h3><h5>(若是已清理，請忽略！)</h5></div>
　　</div>

</body>

<script type="text/javascript">

1.顯示系統維護，隱藏登陸信息
$(function() { 
　　document.getElementById("row").style.display="none"; 
　　var myDiv = document.getElementById('signinpanel'); //得到dom對象
　　myDiv.innerHTML = myDiv.innerHTML+'<div style="color:black;font-size:35px;font-weight:bold;">舒適提示:<br/>系統正在維護中，11月15日能夠正常使用！'+
　　　　'<img style="height: 50px; width: 50px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573622849052&di=0e6e11c3c5d5fe856ac359e7a2dc0d94&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190401%2F22%2F1554129886-KSrbTfRMVy.jpg"></div>';
　　return false;
});

2.在xxxx日期以前提示用戶清理緩存，以後就消失
var div = document.getElementById("message");
window.onload = function () {
　　div.style.display='block';
　　var nowtime = new Date();
　　var endtime = new Date('2019/12/16,17:57:00');
　　var time= parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
　　window.setTimeout("tick()",time);
};

3.給固定值5秒，時間到後消失

window.setTimeout("tick()",5000);

function tick(){ div.style.display='none'; }

相關標籤/搜索