js代码|点击显示内容,再次点击隐藏内容(js点击再点击隐藏元素和显示)
时间:2021-08-28 22:53:05 阅读:2222
利用一些小技巧,让网站看上去更加美观
Markup
<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>
复制成功!<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>
复制成功!
网友评论