IrisVega/test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: date.html

Browse Source 
modified:   script.js
	modified:   styles.css
	modified:   test.html
This commit is contained in:
IrisVega 2024-07-08 21:38:32 +08:00
parent f8ea0510f2
commit 7a93eb06b8
4 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
date.html
View File

@ -6,7 +6,7 @@
<title>选择日期</title> <title>选择日期</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
<body> <body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
<h3>你选择的日期为：</h3> <h3>你选择的日期为：</h3>
<div id="selectedDate">No date selected</div> <div id="selectedDate">No date selected</div>
<script> <script>

12
script.js
View File

@ -272,4 +272,16 @@ $(document).ready(function() {
showcld(); //页面加载后执行函数 showcld(); //页面加载后执行函数
}); });
$(document).ready(function() {
const slider = $('#mySlider');
const sliderValue = $('#sliderValue');
// 初始化显示滑块的值
sliderValue.text(slider.val());
// 监听滑块值的变化
slider.on('input', function() {
sliderValue.text(slider.val());
});
});
}); });

15
styles.css
View File

@ -116,4 +116,19 @@ td {
} }
#left:hover, #right:hover { #left:hover, #right:hover {
background-color: rgba(30, 30, 30, 0.2); background-color: rgba(30, 30, 30, 0.2);
}
.slider-container {
display: flex;
align-items: center;
margin-top: 20px;
}
input[type="range"] {
width: 300px;
margin-right: 10px;
}
span {
font-size: 1.2em;
font-weight: bold;
} }

4
test.html
View File

@ -8,6 +8,10 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;"> <body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
<div class="slider-container">
<input type="range" id="mySlider" min="0" max="100" value="50">
<span id="sliderValue">50</span>
</div>
<div class="tab"> <div class="tab">
<button class="tablinks" data-tab="Tab1">日历</button> <button class="tablinks" data-tab="Tab1">日历</button>
<button id="addTab" class="addTab">+</button> <button id="addTab" class="addTab">+</button>