fix 一些小问题
This commit is contained in:
parent
5cc3847c7c
commit
29e36c3401
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
@ -260,7 +260,7 @@ span.time-text {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/*进度条*/
|
||||
/*时间胶囊*/
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
@ -277,8 +277,6 @@ span.time-text {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/*时间胶囊*/
|
||||
|
||||
.date {
|
||||
width: 100%;
|
||||
}
|
||||
|
36
index.html
36
index.html
@ -29,8 +29,8 @@
|
||||
<!-- 引入 Fontawesome -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
||||
media="all">
|
||||
<!--引入 Vue-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
||||
<!--引入 Vue
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||
<!-- 百度统计 -->
|
||||
@ -226,14 +226,30 @@
|
||||
<i class="fad fa-grip-lines-vertical"></i>
|
||||
</div>
|
||||
<div class="date" id="date">
|
||||
<p class="date-text" style="margin-top: 0rem;">今日已经度过了大约 {{hour}} 小时</p>
|
||||
<div v-html="jinduT()" class="marginbottom"></div>
|
||||
<p class="date-text">本周已经度过了 {{week}} 天,今天是第 {{curweek}} 天</p>
|
||||
<div v-html="jinduZ()" class="marginbottom"></div>
|
||||
<p class="date-text">本月已经度过了 {{day}} 天,今天是第 {{curday}} 天</p>
|
||||
<div v-html="jinduD()" class="marginbottom"></div>
|
||||
<p class="date-text">{{year}} 年已经度过了 {{month}} 个月,度过了 {{outday}} 天</p>
|
||||
<div v-html="jinduY()" class="marginbottom"></div>
|
||||
<div class="item" id="dayProgress">
|
||||
<div class="date-text" style="margin-top: 0rem;">今日已经度过了 <span></span> 小时</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="weekProgress">
|
||||
<div class="date-text">本周已经度过了 <span></span> 天</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="monthProgress">
|
||||
<div class="date-text">本月已经度过了 <span></span> 天</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" id="yearProgress">
|
||||
<div class="date-text">今年已经度过了 <span></span> 个月</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<i class="fad fa-grip-lines-vertical"></i>
|
||||
|
@ -277,7 +277,13 @@ window.addEventListener('load', function () {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/*
|
||||
document.getElementById("theme-toggle").addEventListener("click", () => {
|
||||
document.body.className.includes("dark") ? (document.body.classList.remove('dark'),
|
||||
localStorage.setItem("pref-theme", 'light')) : (document.body.classList.add('dark'),
|
||||
localStorage.setItem("pref-theme", 'dark'))
|
||||
})
|
||||
*/
|
||||
//移动端切换功能区
|
||||
var changemore = false;
|
||||
$('#changemore').on('click', function () {
|
||||
|
52
js/time.js
52
js/time.js
@ -1,3 +1,4 @@
|
||||
/*
|
||||
var vm = new Vue({
|
||||
el: '#date',
|
||||
data: {
|
||||
@ -71,3 +72,54 @@ var vm = new Vue({
|
||||
}
|
||||
}
|
||||
})
|
||||
*/
|
||||
|
||||
function init_life_time() {
|
||||
function getAsideLifeTime() {
|
||||
/* 当前时间戳 */
|
||||
let nowDate = +new Date();
|
||||
/* 今天开始时间戳 */
|
||||
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
|
||||
/* 今天已经过去的时间 */
|
||||
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
|
||||
/* 今天已经过去的时间比 */
|
||||
let todayPassHoursPercent = (todayPassHours / 24) * 100;
|
||||
$('#dayProgress .date-text span').html(parseInt(todayPassHours));
|
||||
$('#dayProgress .progress .progress-bar').css('width', parseInt(todayPassHoursPercent) + '%');
|
||||
$('#dayProgress .progress .progress-bar').html(parseInt(todayPassHoursPercent) + '%');
|
||||
/* 当前周几 */
|
||||
let weeks = {
|
||||
0: 7,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6
|
||||
};
|
||||
let weekDay = weeks[new Date().getDay()];
|
||||
let weekDayPassPercent = (weekDay / 7) * 100;
|
||||
$('#weekProgress .date-text span').html(weekDay);
|
||||
$('#weekProgress .progress .progress-bar').css('width', parseInt(weekDayPassPercent) + '%');
|
||||
$('#weekProgress .progress .progress-bar').html(parseInt(weekDayPassPercent) + '%');
|
||||
/* 月 */
|
||||
let year = new Date().getFullYear();
|
||||
let date = new Date().getDate();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let monthAll = new Date(year, month, 0).getDate();
|
||||
let monthPassPercent = (date / monthAll) * 100;
|
||||
$('#monthProgress .date-text span').html(date);
|
||||
$('#monthProgress .progress .progress-bar').css('width', parseInt(monthPassPercent) + '%');
|
||||
$('#monthProgress .progress .progress-bar').html(parseInt(monthPassPercent) + '%');
|
||||
/* 年 */
|
||||
let yearPass = (month / 12) * 100;
|
||||
$('#yearProgress .date-text span').html(month);
|
||||
$('#yearProgress .progress .progress-bar').css('width', parseInt(yearPass) + '%');
|
||||
$('#yearProgress .progress .progress-bar').html(parseInt(yearPass) + '%');
|
||||
}
|
||||
getAsideLifeTime();
|
||||
setInterval(() => {
|
||||
getAsideLifeTime();
|
||||
}, 1000);
|
||||
}
|
||||
init_life_time()
|
Loading…
Reference in New Issue
Block a user