使用layui轻松实现4则运算

最新推荐文章于 2023-11-12 22:16:19 发布

Coderabo

最新推荐文章于 2023-11-12 22:16:19 发布

阅读量116

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/tombosky/article/details/134331905

版权

如何使用layui进行4则运算

Layui是一款前端UI框架，它提供了丰富的组件和功能，包括表单验证、表格操作等。本文将介绍如何使用layui进行4则运算。

步骤1：引入layui库

首先，需要在HTML文件中引入layui库。可以通过CDN或者下载本地文件的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui 4则运算示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

步骤2：创建表单

在页面中创建一个表单，用于输入4则运算的数值和选择运算符。

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">数值1</label>
    <div class="layui-input-block">
      <input type="text" name="num1" required lay-verify="required" placeholder="请输入数值1" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">数值2</label>
    <div class="layui-input-block">
      <input type="text" name="num2" required lay-verify="required" placeholder="请输入数值2" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">运算符</label>
    <div class="layui-input-block">
      <select name="operator" lay-verify="required">
        <option value="add">加法</option>
        <option value="subtract">减法</option>
        <option value="multiply">乘法</option>
        <option value="divide">除法</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">计算结果</button>
      <p style="color: red;"></p>
    </div>
  </div>
</form>

步骤3：编写JavaScript代码

在页面中添加JavaScript代码，用于处理表单提交事件，实现4则运算的功能。

<script>
  layui.use(['jquery', 'layer'], function(){
    var $ = layui.jquery;
    var layer = layui.layer;
    
    //监听提交
    $("form").on('submit(formDemo)', function(e){
      e.preventDefault(); //阻止默认行为
      
      //获取表单数据
      var num1 = parseFloat($("input[name='num1']").val());
      var num2 = parseFloat($("input[name='num2']").val());
      var operator = $("select[name='operator']").val();
      
      //根据运算符进行计算
      var result;
      switch(operator){
        case "add":
          result = num1 + num2;
          break;
        case "subtract":
          result = num1 - num2;
          break;
        case "multiply":
          result = num1 * num2;
          break;
        case "divide":
          if(num2 === 0){
            layer.msg("除数不能为0");
            return;
          }
          result = num1 / num2;
          break;
      }
      
      //显示结果
      $("p").text("计算结果：" + result);
    });
  });
</script>

完整实例代码

将以上代码整合到一个完整的HTML文件中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui 4则运算示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
</head>
<body>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">数值1</label>
        <div class="layui-input-block">
          <input type="text" name="num1" required lay-verify="required" placeholder="请输入数值1" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">数值2</label>
        <div class="layui-input-block">
          <input type="text" name="num2" required lay-verify="required" placeholder="请输入数值2" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">运算符</label>
        <div class="layui-input-block">
          <select name="operator" lay-verify="required">
            <option value="add">加法</option>
            <option value="subtract">减法</option>
            <option value="multiply">乘法</option>
            <option value="divide">除法</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">计算结果</button>
          <p style="color: red;"></p>
        </div>
      </div>
    </form>
    <script>
      layui.use(['jquery', 'layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        
        //监听提交
        $("form").on('submit(formDemo)', function(e){
          e.preventDefault(); //阻止默认行为
          
          //获取表单数据
          var num1 = parseFloat($("input[name='num1']").val());
          var num2 = parseFloat($("input[name='num2']").val());
          var operator = $("select[name='operator']").val();
          
          //根据运算符进行计算
          var result;
          switch(operator){
            case "add":
              result = num1 + num2;
              break;
            case "subtract":
              result = num1 - num2;
              break;
            case "multiply":
              result = num1 * num2;
              break;
            case "divide":
              if(num2 === 0){
                layer.msg("除数不能为0");
                return;
              }
              result = num1 / num2;
              break;
          }
          
          //显示结果
          $("p").text("计算结果：" + result);
        });
      });
    </script>
</body>
</html>