diff --git a/date.html b/date.html
index d67c611..80a1d34 100644
--- 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>
diff --git a/script.js b/script.js
index 6b2003b..fbded54 100644
--- 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());
+    });
+});
 });
\ No newline at end of file
diff --git a/styles.css b/styles.css
index b01458b..fd651dc 100644
--- 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;
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index e01af9a..7e4615c 100644
--- 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>
