前端js案例

2019-11-29 08:39:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前端js案例

系统登录首页常用案例:

<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'; }

 


原文链接:https://www.cnblogs.com/leigei-it/p/11957970.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于JDK源码:我想聊聊如何更高效地阅读

下一篇:jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态