wally
/
plugin-templete
1
0
Fork 1
Code Issues Releases Wiki Activity
Browse Source

时间选择器

10-plugin-task-start
aBin 4 years ago
parent
ca8c0bf2ea
commit
3374412bae
1 changed files with 151 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      index.html

152
index.html
View File

@ -61,14 +61,162 @@
<div class="flex flex-row-reverse items-center" onclick="p1419895659787722752.jumpDetails(this)">
<img style="height:16px" src="https://www.tall.wiki/staticrec/photos/right.png">
</div>
<div class="time-box w-screen h-screen fixed z-10" style="background: rgba(0,0,0,0.65);top:0;left:0;display:none">
<div class="flex flex-col h-2/6 absolute w-full" style="background:#fff;bottom: 0;">
<div class="flex justify-between p-2 border-gray-200 border-b-2" style="height:44px;">
<div class="text-gray-500" onclick="p1419895659787722752.cancelTime()">取消</div>
<div>分诊时间</div>
<div class="text-blue-500" onclick="p1419895659787722752.changeTime()">确定</div>
</div>
<div class="flex flex-1 items-center overflow-hidden">
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute" style="right:-8px">
<div class="h-full mx-auto year-box overflow-y-scroll" style="padding: 76px 16px 76px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
年
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute" style="right:-8px">
<div class="h-full month-box mx-auto overflow-y-scroll" style="padding: 76px 16px 76px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
月
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute" style="right:-8px">
<div class="h-full day-box mx-auto overflow-y-scroll" style="padding: 76px 16px 76px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
日
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute" style="right:-8px">
<div class="h-full hour-box mx-auto overflow-y-scroll" style="padding: 76px 16px 76px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
时
</div>
<div class="h-full flex flex-row text-center w-1/6 overflow-x-hidden relative">
<div class="h-full mx-auto absolute" style="right:-8px">
<div class="h-full min-box mx-auto overflow-y-scroll" style="padding: 76px 16px 76px 0;"></div>
</div>
</div>
<div class="flex flex-row text-center">
分
</div>
</div>
</div>
</div>
</div>
</div>
<script>
;(function() {
const hourDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.hour-box');
const minDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.min-box');
const yearDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.year-box');
const monthDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.month-box');
const dateDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.day-box');
/* 生成小时数组 */
for(let i=0;i<24;i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
hourDom.appendChild(div);
}
/* 生成分钟数组 */
for(let i=0;i<60;i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
minDom.appendChild(div);
}
/* 生成年数组 */
var my = new Date();
var endYear = my.getFullYear();// 获取当前年份
for (var i = endYear; i > 1899; i--) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
yearDom.appendChild(div);
}
/* 生成月数组 */
for (var i = 1; i < 13; i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
monthDom.appendChild(div);
}
/* 生成日数组 */
for (var i = 1; i < 32; i++) {
var div = document.createElement('div');
div.style.height = '26px';
div.innerHTML = i;
dateDom.appendChild(div);
}
})()
const p1419895659787722752 = {
token: '',
dom: '',
cancelTime() {
var dom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.time-box');
dom.style.display = 'none'
},
changeTime() {
const hourDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.hour-box');
const minDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.min-box');
const yearDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.year-box');
const monthDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.month-box');
const dayDom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.day-box');
const year = 2021 - Math.round(yearDom.scrollTop / 26)
let month = Math.round(monthDom.scrollTop / 26) + 1
let day = Math.round(dayDom.scrollTop / 26) + 1
if (month === 2) {
if ( (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0 && year % 4000 !== 0) ) {
if(day > 29) {
day = 29
}
} else {
if(day > 28) {
day = 28
}
}
} else {
if (month === 2 || month === 4 || month === 6 || month === 9 || month === 11) {
if(day > 30) {
day = 30
}
} else {
if(day > 31) {
day = 31
}
}
}
let hour = Math.round(hourDom.scrollTop / 26)
let min = Math.round(minDom.scrollTop / 26)
if(month<10) {
month = '0' + month
}
if(day<10) {
day = '0' + day
}
if(hour<10) {
hour = '0' + hour
}
if(min<10) {
min = '0' + min
}
console.log(`${year}年-${month}月-${day}日 ${hour}时:${min}分`)
this.cancelTime()
},
init() {
this.dom = document.querySelector("div[data-root=p1419895659787722752]");
var domBox = this.dom.parentNode;
@ -174,6 +322,8 @@
// 选择时间 添加
chooseTime(){
var dom = document.querySelector("div[data-root=p1419895659787722752]").querySelector('.time-box');
dom.style.display = 'block'
var that = this
const params = JSON.stringify({
param: {}

Write Preview
Loading…
Cancel
Save