解决 网页上显示时间,刷新的时候下面的搜索框总会抖动一下,对用户的体验不好问题
前提提要
本文不具有泛化性,更多的是自己设计时候的不细心造成的,原因是,margin-top设置在了他俩父元素上,导致的,具体为啥会导致这样,俺也不懂,我只是个菜鸡
问题
原来的代码
<!-- 首行logo -->
<div class="container">
<div class="logotop">
<div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8"
style="margin-top: 20px;padding-left: 50px; padding-right: 0px;">
<p class="text-center" id="show_time" style="color: aliceblue;"></p>
<p style="line-height: 2px"><br /></p>
<form class="navbar-form">
<div style="width: 30%;float: right;">
<button type="submit" class="btn btn-default text-center">搜索</button>
</div>
<div class="form-group" style="width: 60%;float: right;">
<input type="text" class="form-control" placeholder="站内搜索" style="width: 90%;">
</div>
</form>
</div>
</div>
</div>
<!-- 首行logo -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>//这里就一句话就可以显示时间
setInterval("show_time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 100);
</script>
解决方法
把原来放时间的 p 单独独立出来放在一个div中,然后不是给父元素设置 margin-top 而是给子元素设置,代码如下:
<div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8" style="padding-left: 50px; padding-right: 0px;">
<div style="height: 30px; margin-top: 20px;">
<p class="text-center" id="show_time" style="color: aliceblue;"></p>
</div>
<!-- 首行logo -->
<div class="container">
<div class="logotop">
<div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8"
style="padding-left: 50px; padding-right: 0px;">
<div style="height: 30px; margin-top: 20px;">
<p class="text-center" id="show_time" style="color: aliceblue;"></p>
</div>
<form class="navbar-form">
<div style="width: 30%;float: right;">
<button type="submit" class="btn btn-default text-center">搜索</button>
</div>
<div class="form-group" style="width: 60%;float: right;">
<input type="text" class="form-control" placeholder="站内搜索" style="width: 90%;">
</div>
</form>
</div>
</div>
</div>
<!-- 首行logo -->