来个自定义的电子木鱼吧

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定义木鱼</title>
</head>
<body style="background-color: black;"><div style="margin-top: 100px;margin-left: 30%;"><!-- 木鱼 --><img src="./muyu.png" id="muyu"></div><div id="gongde" style="font-size: 50px;color: white;position: absolute;top: 190px;right: 30%;display: none;"><span id="gongdeText"></span><span>+</span><span id="num">1</span></div><div id="set" style="font-size: 20px;color: white;position: absolute;top: 190px;right: 10%;display: block;">设置</div><div id="dialog" style="font-size: 20px;color: white;position: absolute;top: 120px;right: 10%;display: none;">文字：<input id="gongdetext"></span>数量：<input id="gongdeNumber"></span><div style="width:100%;display: flex;justify-content: space-between;"><div id="save">保存</div><div id="close">关闭</div></div></div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">$("#muyu").mousedown(function () {if (!$("#gongdetext")[0].value) {$("#gongdeText")[0].textContent = '功德'}if (!$("#gongdeNumber")[0].value) {$("#num")[0].textContent = 1}$("#muyu").width = $("#muyu").width / 1.1;$("#muyu").height = $("#muyu").height / 1.1;$("#gongde").show();});$("#set").mousedown(function () {$("#dialog")[0].style.display = 'block';$("#set")[0].style.display = 'none';});$("#close").mousedown(function () {$("#dialog")[0].style.display = 'none';$("#set")[0].style.display = 'block';});$("#save").mousedown(function () {$("#gongdeText")[0].textContent = $("#gongdetext")[0].value$("#num")[0].textContent = $("#gongdeNumber")[0].value$("#dialog")[0].style.display = 'none';$("#set")[0].style.display = 'block';});$("#muyu").mouseup(function () {$("#muyu").width = $("#muyu").width * 1.1;$("#muyu").height = $("#muyu").height * 1.1;$("#gongde").hide();});
</script></html>

图自己截一下哈
请添加图片描述