来个自定义的电子木鱼吧

人间清醒小仙女

于 2024-04-03 15:51:25 发布

阅读量262

点赞数 3

分类专栏： js html javascript 文章标签： javascript 前端程序人生

本文链接：https://blog.csdn.net/weixin_45631278/article/details/137348435

版权

js 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>

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