<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>绘图控制</title>
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2599272_671fgrsk7ev.css">
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
<script>
|
layui.use('laydate', function () {
|
var laydate = layui.laydate;
|
});
|
</script>
|
|
<style>
|
.sunshinediv {
|
/* overflow-x: hidden; */
|
}
|
|
.mt-label {
|
height: 30px;
|
color: white;
|
width: 70px;
|
float: left;
|
margin-left: 10px;
|
line-height: 30px;
|
font-size: 12px;
|
}
|
|
.mt-content {
|
height: 30px;
|
color: white;
|
width: 250px;
|
float: left;
|
/* margin-left: 10px; */
|
}
|
|
.mt-row {
|
height: 30px;
|
margin-top: 15px;
|
}
|
|
.form-control {
|
/* display: block; */
|
width: 206px;
|
height: 20px;
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
background-color: #2c3238;
|
opacity: 0.8;
|
color: #fff;
|
background-image: none;
|
border: 0px solid #e4eaec;
|
border-radius: 3px;
|
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
}
|
|
.form-control-small {
|
/* display: block; */
|
width: 90px;
|
height: 20px;
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
background-color: #2c3238;
|
opacity: 0.8;
|
color: #fff;
|
background-image: none;
|
border: 0px solid #e4eaec;
|
border-radius: 3px;
|
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
}
|
|
.mybtn-blue {
|
color: #fff;
|
background-color: #1E9FFF;
|
border-color: #1E9FFF;
|
}
|
.mybtn-yellow {
|
color: #fff;
|
background-color: #FFB800;
|
border-color: #FFB800;
|
}
|
|
.mybtn-green {
|
color: #fff;
|
background-color: #009688;
|
border-color: #009688;
|
}
|
.mybtn-red {
|
color: #fff;
|
background-color: #FF5722;
|
border-color: #FF5722;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="sunshinediv">
|
<div class="mt-row">
|
<div class="mt-label">选择日期：</div>
|
<div class="mt-content">
|
<input type="date" class="form-control" placeholder="yyyy-MM-dd" id = "date"/>
|
</div>
|
</div>
|
|
<div class="mt-row">
|
<div class="mt-label">时间范围：</div>
|
<div class="mt-content">
|
<input type="time" class="form-control-small" placeholder="月-日" autocomplete="off" id="timefrom" />
|
<input type="time" class="form-control-small" placeholder="月-日" autocomplete="off" id="timeto" />
|
</div>
|
</div>
|
|
<div class="mt-row">
|
<div class="mt-label">动画速度：</div>
|
<div class="mt-content">
|
<input type="number" class="form-control" autocomplete="off" id="speed" max="10" min="1" value="3" />
|
</div>
|
</div>
|
|
<div class="mt-row">
|
<button type="button" style="margin-left: 80px;" class="layui-btn mybtn-blue layui-btn-sm" onclick="start()"><i class="iconfont icon-kaishi"></i> 开 始</button>
|
<button type="button" class="layui-btn mybtn-yellow layui-btn-sm" onclick="stop()"><i class="iconfont icon-jieshu"></i> 暂 停</button>
|
</div>
|
</div>
|
|
|
<script>
|
|
function start() {
|
let date = document.getElementById('date').value;
|
let timeFrom = new Date(date + " " + document.getElementById('timefrom').value);
|
let timeTo = new Date(date + " " + document.getElementById('timeto').value);
|
let speed = parseInt(document.getElementById('speed').value * 500);
|
parent.sunshineStart(timeFrom, timeTo, speed);
|
};
|
function stop() {
|
parent.sunshineStop();
|
};
|
function clear() {
|
};
|
</script>
|
</body>
|
|
</html>
|
