modified: date.html

modified: script.js modified: styles.css modified: test.html
2024-07-08 21:38:32 +08:00 · 2024-07-08 21:38:32 +08:00 · 7a93eb06b8
parent f8ea0510f2
commit 7a93eb06b8
4 changed files with 32 additions and 1 deletions
--- a/date.html
+++ b/date.html
@ -6,7 +6,7 @@
    <title>选择日期</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
-<body>
+<body  background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
    <h3>你选择的日期为：</h3>
    <div id="selectedDate">No date selected</div>
    <script>
--- a/script.js
+++ b/script.js
@ -272,4 +272,16 @@ $(document).ready(function() {

    showcld(); //页面加载后执行函数
 });
+$(document).ready(function() {
+    const slider = $('#mySlider');
+    const sliderValue = $('#sliderValue');
+
+    // 初始化显示滑块的值
+    sliderValue.text(slider.val());
+
+    // 监听滑块值的变化
+    slider.on('input', function() {
+        sliderValue.text(slider.val());
+    });
+});
 });
--- a/styles.css
+++ b/styles.css
@ -116,4 +116,19 @@ td {
 }
 #left:hover, #right:hover {
    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;
 }
--- a/test.html
+++ b/test.html
@ -8,6 +8,10 @@
    <link rel="stylesheet" href="styles.css">
 </head>
 <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">
        <button class="tablinks" data-tab="Tab1">日历</button>
        <button id="addTab" class="addTab">+</button>