我是想做一下，让显示时间的秒可以做到，点击按钮时可以做到点击一次，如果秒和它是旁边的 ：号和秒都会被隐藏掉，再次点击按钮后显示，再继续读秒
我是想做一下，让显示时间的秒可以做到，点击按钮时可以做到点击一次，如果秒和它是旁边的 ：号和秒都会被隐藏掉，再次点击按钮后显示，再继续读秒
<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新标签</title>
<script>
window.onload = function () {
SiteTopSizeSiteTime();
showTime();
SearchSite();
};
function SiteTopSizeSiteTime() {
var SiteTop = document.querySelector('.site-top');
var AppTime = document.querySelector('.app-time');
AppTime.onclick = function () {
if (SiteTop.offsetHeight <= 30) {
SiteTop.className = 'site-top site-top-big';
} else {
SiteTop.className = 'site-top';
}
};
};
function showTime() {
var AppTime = document.querySelector('.app-time');
var AppDate = document.querySelector('.app-date');
var lmonth, lday, lleap; //农历参数
var nyear;
var nmonth;
var nday = -1;
var nwday;
var nhrs;
var nmin;
var nsec;
var lmonth, lday, lleap; //农历参数
function Draw() {
NewTick();
//显示时间
var S = nmonth + '月' + nday + '日';
var wRecoult;
var n = lmonth + '月' + lday;
switch (nwday) {
case 0:
wRecoult = '星期日';
break;
case 1:
wRecoult = '星期一';
break;
case 2:
wRecoult = '星期二';
break;
case 3:
wRecoult = '星期三';
break;
case 4:
wRecoult = '星期四';
break;
case 5:
wRecoult = '星期五';
break;
case 6:
wRecoult = '星期六';
break;
default:
break;
}
AppDate.innerHTML = '<span class="date-s h">' + S + '</span>' + '<span class="date-w h">' + wRecoult + '</span>' + '<span class="date-n h">' + n + '</span>';
}
function loadTime() {
NewTick();
var s = shapetime(nhrs, nmin, nsec);
}
function NewTick() {
let noww = new Date();
if (noww.getDate() != nday) {
nyear = noww.getFullYear();
nmonth = noww.getMonth() + 1;
nwday = noww.getDay();
nday = noww.getDate();
getlunar(); //获取农历
}
nhrs = noww.getHours();
nmin = noww.getMinutes();
nsec = noww.getSeconds();
}
function shapetime(vhrs, vmin, vsec) {
if (vsec <= 9) vsec = '0' + vsec;
if (vmin <= 9) vmin = "0" + vmin;
if (vhrs <= 9) vhrs = "0" + vhrs;
// return vhrs + ":" + vmin + ":" + vsec
AppTime.innerHTML = '<time class="time-h h">' + vhrs + '</time>' + '<span class="colon h">' + ':' + '</span>'
+ '<time class="time-m h">' + vmin + '</time>' + '<span class="colon h">' + ':' + '</span>' + '<time class="time-s h">' + vsec + '</time>';
}
//阴历函数开始
var lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63);
function lYearDays(y) {
var i, sum = 348;
for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
return (sum + leapDays(y));
}
function leapDays(y) {
if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
else return (0);
}
function leapMonth(y) {
return (lunarInfo[y - 1900] & 0xf);
}
function monthDays(y, m) {
return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
}
function Lunar(y, m, d) {
var i, leap = 0,
temp = 0;
var offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
for (i = 1900; i < 2050 && offset > 0; i++) {
temp = lYearDays(i);
offset -= temp;
}
if (offset < 0) {
offset += temp;
i--;
}
this.year = i;
leap = leapMonth(i);
this.isLeap = false;
for (i = 1; i < 13 && offset > 0; i++) {
if (leap > 0 && i == (leap + 1) && this.isLeap == false) {
--i;
this.isLeap = true;
temp = leapDays(this.year);
} else {
temp = monthDays(this.year, i);
}
if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
offset -= temp;
}
if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
this.isLeap = false;
} else {
this.isLeap = true; --i;
}
if (offset < 0) {
offset += temp; --i;
}
this.month = i;
this.day = offset + 1;
}
var nStr1 = new Array('', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二');
var nStr2 = new Array('初', '十', '廿', '卅', '□');
function GetcDay(d) {
var s;
switch (d) {
case 10:
s = '初十';
break;
case 20:
s = '二十';
break;
case 30:
s = '三十';
break;
default:
s = nStr2[Math.floor(d / 10)];
s += nStr1[d % 10];
break;
}
return (s);
}
function GetcMon(m) {
if (m == 1) return '正';
else return nStr1[m];
}
function getlunar() {
var lObj = new Lunar(nyear, nmonth - 1, nday);
lmonth = GetcMon(lObj.month);
lday = GetcDay(lObj.day);
lleap = lObj.isLeap;
if (lleap == 1) {
lmonth = "闰" + lmonth;
}
}
Draw();
loadTime();
setInterval(function () {
loadTime();
}, 1000);
};
function SearchSite() {
var AppSearchMode = document.querySelector('.app-search-mode');
AppSearchMode.onclick = function () {
ShowAndHide();
};
};
window.onclick = function (e) {
var SiteAppSearchModeHd = document.querySelector('.site-app-search-mode-hd');
var ModeHdHeight = SiteAppSearchModeHd.offsetHeight;
if (e.target.dataset.name == '搜索') {
return;
} else {
if (ModeHdHeight >= 90) {
SiteAppSearchModeHd.style.height = '0px';
}
}
};
function ShowAndHide() {
var SiteAppSearchModeHd = document.querySelector('.site-app-search-mode-hd');
var ModeHdHeight = SiteAppSearchModeHd.offsetHeight;
if (ModeHdHeight >= 90) {
SiteAppSearchModeHd.style.height = '0px';
} else {
SiteAppSearchModeHd.style.height = '90px';
}
};
</script>
</head>
<style>
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1690618714148') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
margin: 0;
padding: 0;
}
html,
body {
font: 12px/1.5 italic bold arial, sans-serif;
}
ul,
li {
list-style-type: none;
}
html,
body {
background: linear-gradient(
125deg,
#2c3e50,
#27ae60,
#2980b9,
#e74c3c,
#8e44ad
);
background-size: 400%;
animation: bganimation 15s infinite;
}
@keyframes bganimation {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
i {
color: #333;
}
.site-top {
position: relative;
height: 4vh;
transition: .2s;
}
.site-top-big {
height: 23vh;
}
.site-time {
position: relative;
width: 100%;
z-index: 10000;
text-align: center;
}
.site-time .site-time-hd {
margin: 0 auto;
}
.site-time .site-time-hd .app-time{
display: inline-block;
}
.site-time .site-time-hd .app-time,.app-date{
cursor: default;
}
.site-time .site-time-hd .app-time .colon {
vertical-align: calc(70px / 12);
}
.site-time .site-time-hd .app-time .h {
color: #fff;
font-size: 70px;
line-height: 70px;
}
.site-time .site-time-hd .app-date .h {
color: #fff;
font-size: 14px;
margin: 0 3px;
line-height: 26px;
}
.site-search {
position: relative;
width: 100%;
z-index: 1000;
}
.site-search .site-search-hd {
margin: 15px auto 0;
width: 600px;
height: 45px;
}
.site-search .site-search-hd .app-search-hd {
width: 600px;
height: 45px;
border-radius: 45px;
background: rgba(255, 255, 255, 0.3);
}
.site-search .site-search-hd .app-search-hd:hover {
background: rgba(255, 255, 255, 0.4);
}
.site-search .site-search-hd .app-search-hd .app-search-mode {
width: 37px;
height: 45px;
line-height: 45px;
float: left;
padding: 0 3px 0 10px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.site-search .site-search-hd .app-search-hd .app-search-mode:hover {
background: rgba(255, 255, 255, 0.3);
}
.site-search .site-search-hd .app-search-hd .app-search-mode img {
margin-top: 11px;
margin-right: 3px;
width: 20px;
height: 20px;
line-height: 20px;
float: left;
}
.drop-down {
margin-top: 22px;
float: left;
display: block;
width: 12px;
height: 7px;
line-height: 7px;
overflow: hidden;
}
.drop-down .drop-icon {
display: block;
margin-top: -2px;
font-size: 12px;
text-align: center;
width: 12px;
height: 7px;
}
.site-search .site-search-hd .app-search-hd .app-search {
float: left;
width: 500px;
height: 20px;
padding: 12px 0;
background: none;
border: none;
outline: none;
}
.site-search .site-search-hd .app-search-hd .btn-search {
float: left;
width: 50px;
height: 45px;
line-height: 45px;
background: none;
border: none;
outline: none;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.site-search .site-search-hd .app-search-hd .btn-search:hover {
background: rgba(255, 255, 255, 0.3);
}
.site-search .site-search-hd .app-search-mode-select {
padding: 10px 0;
width: 600px;
}
.site-search .site-search-hd .app-search-mode-select .site-app-search-mode-hd {
width: 600px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.3);
transition: height 0.3s ease-out;
}
</style>
<body style="height: 5000px;">
<div class="site-top"></div>
<div class="site-time">
<div class="site-time-hd">
<div class="app-time"></div>
<div class="app-date"></div>
</div>
</div>
<div class="site-search">
<div class="site-search-hd">
<div class="app-search-hd">
<div class="app-search-mode">
<img src="./image/baidu.svg" alt="">
<span class="drop-down">
<span class="drop-icon iconfont"></span>
</span>
</div>
<input class="app-search" autocomplete="off" placeholder="请输入搜索内容" type="text">
<button class="btn-search">
搜索
</button>
</div>
<div class="app-search-mode-select">
<ul class="site-app-search-mode-hd" style="height: 0px;">
<li class="app-search-mode-hd"></li>
</ul>
</div>
</div>
</div>
</body>
</html> -->
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/765692
- 你也可以参考下这篇文章：很简单的图片自动轮播，点击焦点就显示点击的那个
- 您还可以看一下 韦语洋（Lccee）老师的一机一码加密、被破解自动销毁随时授权回收升级系列视频课程课程中的 被破解泛滥，可回收授权禁止使用软件小节, 巩固相关知识点
- 除此之外, 这篇博客: 实现点击显示、隐藏效果中的 实现点击显示、隐藏效果 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
开发工具与关键技术：VS、MVC 作者：黎官凤 撰写时间：2019/05/12不管在前端还是在后端页面布局都是需要的。页面布局说简单又不简单，说难又不难，这个应该就是看个人的了。在Mvc中做项目页面布局可以说是比较简单的。在页面布局中实现点击显示、隐藏的功能，可能有些人觉得可以使用插件，但是插件的使用是固定的。就比如说有些插件是要使用ul li才能使用插件里面的功能，如果不使用ul li那么里面插件的功能就不能使用了。使用插件是很方便的，但是页面布局有些会影响到效果不是我们想要的。
下面就举例写一下点击显示、隐藏的功能效果。
先在你所需要的页面上写出一些您想要的简单样式
记住一定要给它id，不然js代码不能写
样式你们就自己丰富吧
不过要再它们下面的盒子给一个隐藏起来的样式
display: none;是把它隐藏起来的意思
方便在写js的时候让它点击就出现的效果
创建的css、js文件要在页面那边引用，在解决方案资源管理器里找到你所创建的css、js把它按住拖到你写的页面css在head前js在html代码后。
写完css样式接下来就写js代码
var 声明变量这个部分在Mvc中可以不写好像也是可以的。
注意我在这把ywhl称为业务管理
stgl系统管理stgl.onclick
= function () {stgl系统管理id onclick点击事件
stglbf.style.display = "block";stglbf系统管理下的盒子id 当你点击系统管理的时候它的盒子就出现 block出现
ywhlbf.style.display = "none";ywhlbf另一个盒子下盒子的id 当你点击系统管理的时候它的盒子就消失
}
当你点击系统管理的时候，系统管理的盒子就出现同时业务管理的盒子就消失，
反之，当你点击业务管理的时候，业务管理的盒子就出现同时系统管理的盒子就消失。
不过这里还有个问题就是它点击自身的时候它下面的盒子不会消失，这个问题我不知道应该怎么做，知道的朋友可以告诉我，我再完善。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^