js代码|点击显示内容,再次点击隐藏内容(js点击再点击隐藏元素和显示)

时间:2021-08-28 22:53:05   阅读:1810

利用一些小技巧,让网站看上去更加美观

<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) { 
    $("#btn").click(function(){
         if(!$("#zshao").is(":visible")){
          $("#zshao").show(); 
          $(this).val("隐藏");
         }else{ 
          $("#zshao").hide(); 
          $(this).val("显示");
        }
    });
        
});
</script>

<button id="btn" >显示或隐藏</button>

<div style="display:none"  id="zshao">
 
 
 www.zshao.vip永远的神

</div>


js代码|点击显示内容,再次点击隐藏内容(js点击再点击隐藏元素和显示)

<div id="collapseTwo" class="panel-collapse collapse" style="background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);">
       <!--下面放代码--><span style="font-size: 20px;"><strong><span style="color: #000000;" id="Clock"></span></strong></span>
<hr style="border:1px dashed #000; height:1px">
<p>
    <span style="font-size: 20px;"><strong>

<hr>


    </strong></span>
</p>
<hr style="border:1px dashed #000; height:1px">
</div>

<script>

function tick() {
var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today, theday;
today = new Date();
theday =  [today.getMonth()+1]+"月" +today.getDate() +"1444";
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
timeString = theday;
Clock.innerHTML = timeString;
window.setTimeout("tick();", 100);
}
window.onload = tick;
</script>
<style>
        #chongyao{
    	font-size:20px;
    	margin: 0;
        background: -webkit-linear-gradient(left,
            #00ff00,
            #ff0000 6.25%,
            #ffff00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        animation: masked-animation 3s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100%, 0;
        }
    }
</style>

<p style=" z-index:9999; text-decoration:none; font-weight:bold; position: fixed; z-index: 999; right: -6px; bottom: 380px; display: inline-block; width: 50px; border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 10px; color: white; font-size: 17px; line-height: 20px; box-shadow: rgb(72,209,204) 0px 0px 5px; word-wrap: break-word; padding: 8px 13px; border: 2px solid white; background: rgb(72,209,204);"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="chongyao">最新推荐∨必看</a></p>


上一篇:js代码|自动弹出一个窗口(js自动弹出提示框)

下一篇:js代码|指定时间执行任务(js在指定时间执行)

网友评论