杂七杂八模仿了下
[HTML] 纯文本查看 复制代码
<body>
<div class="container">
<div style="width:600px;height:160px;border:1px solid black;margin:0 auto;position:absolute;top:30px;left:20px;right:20px;box-shadow:2px 1px 3px 1px #909090; border-radius:20px;">
<div style="float:left;"><img src="1.png" style="margin-top:10px; margin-left:10px;" /><img src="2.png" style="margin-bottom:15px;margin-left:10px;" /></div>
<div style="text-align:right"><img src="snowflake.png" title="制冷" id="state" style="margin-right:70px;margin-top:30px;visibility:hidden;"/></div><span style="margin-left:65.3%;font-size:25px;color:gray;" id="TEMP"></span><span style="font-size:25px;color:gray;visibility:hidden;" id="TEMPph" >°C</span>
<div style="text-align:center;margin-top:30px;"><img src="3.png" width="12" /></div>
<hr /><div style="margin-top:40px;text-align:center;"><img src="4.png" id="wind" style="visibility:hidden;" /></div>
<div style="height:10px;"></div>
<div style="text-align:center;"> <button class="layui-btn layui-btn-primary" style="border-radius:5px;" id="single">独立遥控器</button></div>
<div id="yaokong">
<div style="height:20px;"></div>
<div style="text-align:center;" class="gcs-radius">
<a href="javascript:void(0)" title="制冷" id="cool"><i class="layui-icon layui-icon-snowflake" style="font-size: 30px; color: blue;"></i></a>
<a href="javascript:void(0)" title="开机" id="open"><i class="layui-icon layui-icon-logout" id="openState" style="font-size: 30px;"></i></a>
<a href="#" title="制热" id="head"><i class="layui-icon layui-icon-light" style="font-size: 30px; color: red;"></i></a>
</div>
<div style="height:40px;"></div>
<div style="text-align:center;">
<a href="#" title="温度+" id="up"><i class="layui-icon layui-icon-up" style="font-size: 30px; color: gray;"></i></a>
</div>
<div style="height:40px;"></div>
<div style="text-align:center;">
<a href="#" title="温度-" id="down"><i class="layui-icon layui-icon-down" style="font-size: 30px; color: gray;"></i></a>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script>
layui.use(['element', 'layer'], function () {
var element = layui.elemen,
layer = layui.layer;
let ssd = 22;
let power;
let work;
$("#open").click(function () {
power = $("#open").attr('title');
if (power == "开机") {
$("#wind").css("opacity", 1);
setTimeout(function () {
$("#openState").css("color", "yellow");
$("#wind").css("visibility", "visible");
$("#open").attr('title', "关机");
$("#TEMP").html(ssd);
$("#TEMPph").css("visibility", "visible");
$("#state").attr('src', work == "制冷" ? "snowflake.png" : "sun.png");
$("#state").css("visibility", "visible");//可见
// $("#wind").fadeIn("slow");
}, 100);
}
if (power == "关机") {
$("#openState").css("color", "gray");
setTimeout(function () {
//$("#wind").fadeOut(3000);
$("#state").css("visibility", "hidden");//取消制冷可见
$("#wind").css("visibility", "hidden");
$("#open").attr('title', "开机");
$("#TEMP").html("");
$("#TEMPph").css("visibility", "hidden");
}, 1000);
}
});
$("#cool").click(function () {
//alert(power);
work = $("#cool").attr('title');
if (power == "开机") {
if (work == "制冷") {
$("#cool").attr('title', "取消制冷");
$("#head").attr('title', "制热");
$("#state").attr('src', "snowflake.png")
$("#state").css("visibility", "visible");//可见
}
else {
$("#cool").attr('title', "制冷");
$("#state").css("visibility", "hidden");
}
}
})
$("#head").click(function () {
work = $("#head").attr('title');
if (power == "开机") {
if (work == "制热") {
$("#cool").attr('title', "制冷");
$("#head").attr('title', "取消制热");
$("#state").attr('src', "sun.png");
$("#state").css("visibility", "visible");//可见
}
else {
$("#head").attr('title', "制热");
$("#state").css("visibility", "hidden");
}
}
});
$("#up").click(function () {
if (power == "开机") {
if (ssd < 32) {
ssd++;
}
$("#TEMP").html(ssd);
}
});
$("#down").click(function () {
if (power == "开机") {
if (ssd > 16) {
ssd--;
}
$("#TEMP").html(ssd);
}
});
$("#single").click(function () {
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['300px', '340px'], //宽高
content: $("#yaokong")
});
})
});
</script>
</body>
| 
发表于 2021-5-13 15:06
|
发表于 2021-5-13 15:17
