Created
December 10, 2019 09:28
-
-
Save WangShuXian6/9cb38a702801be32500d4fe65c8193f5 to your computer and use it in GitHub Desktop.
date select
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="zh-cn"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>data</title> | |
<style> | |
.date-container { | |
opacity: 0; | |
z-index: -1; | |
position: fixed; | |
top: 100vh; | |
left: 0; | |
width: 100vw; | |
height: 100vh; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
transition: all 0.2s ease-in-out; | |
background-color: rgba(0, 0, 0, 0.2); | |
} | |
.date-container.show { | |
opacity: 1; | |
z-index: 1; | |
position: fixed; | |
top: 0vh; | |
left: 0; | |
width: 100vw; | |
height: 100vh; | |
transition: all 0.2s ease-in-out; | |
} | |
.date-container .main { | |
position: relative; | |
display: flex; | |
width: 52vw; | |
height: 9.33vw; | |
} | |
.date-container .main .bg { | |
position: relative; | |
display: flex; | |
width: 52vw; | |
height: 9.33vw; | |
} | |
.date-container .main .month { | |
position: absolute; | |
top: 0px; | |
left: 5vw; | |
display: flex; | |
} | |
.date-container .main .day { | |
position: absolute; | |
top: 0px; | |
left: 28vw; | |
display: flex; | |
} | |
select { | |
/* background: rgba(255, 255, 255, 0.2); */ | |
background: rgba(255, 255, 255, 0); | |
/* color: rgba(255, 255, 255, 0.5); */ | |
color: #fff; | |
border: none; | |
width: 50px; | |
height: 25px; | |
border-radius: 2px; | |
text-align: center; | |
margin: 5px; | |
} | |
select option { | |
color: gray; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="date-container"> | |
<div class='main'> | |
<img src="./time.png" alt="time" class='bg'> | |
<select class="month"> | |
<option value="1">1</option> | |
</select> | |
<select class="day"> | |
<option value="1">1</option> | |
</select> | |
</div> | |
</div> | |
<script> | |
let month // 选中的月份 | |
let day // 选中的日期 | |
const monthDom = document.querySelector('.month') | |
const dayDom = document.querySelector('.day') | |
const dateDom = document.querySelector('.date-container') | |
const showDateSelect = () => { | |
dateDom.classList.add('show') | |
} | |
const hideDateSelect = () => { | |
dateDom.classList.remove('show') | |
} | |
const monthEvent = () => { | |
console.log('month', monthDom.value) | |
month = parseInt(monthDom.value) | |
const days = new Date(2019, month, 0).getDate() | |
initDay(days) | |
} | |
const dayEvent = () => { | |
console.log('day', dayDom.value) | |
day = parseInt(dayDom.value) | |
} | |
const initMonth = () => { | |
let optionsString = `` | |
const months = Array.from(Array(12).keys()) | |
const monthOptions = months.forEach((item) => { | |
optionsString += `<option value="${item + 1}">${item + 1}</option>` | |
}) | |
monthDom.innerHTML = optionsString | |
} | |
const initDay = (days) => { | |
let optionsString = `` | |
const months = Array.from(Array(days).keys()) | |
const monthOptions = months.forEach((item) => { | |
optionsString += `<option value="${item + 1}">${item + 1}</option>` | |
}) | |
dayDom.innerHTML = optionsString | |
} | |
initMonth() | |
initDay(31) | |
monthDom.addEventListener('change', monthEvent) | |
dayDom.addEventListener('change', dayEvent) | |
setTimeout(() => { | |
showDateSelect() | |
}, 2000) | |
setTimeout(() => { | |
hideDateSelect() | |
}, 5000) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment