How to use layui to perform 4 arithmetic operations
Layui is a front-end UI framework that provides a wealth of components and functions, including form validation, table operations, etc. This article will introduce how to use layui to perform 4 arithmetic operations.
Step 1: Introduce layui library
First, you need to introduce the layui library into the HTML file. You can use CDN or download local files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui 4 arithmetic operations example</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
<script src="//i2.wp.com/cdn.staticfile.org/layui/2.5.7/layui.js"></script>
</head>
<body>
<!-- Page content -->
</body>
</html>
Step 2: Create the form
Create a form on the page for entering the values of 4 arithmetic operations and selecting operators.
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">Value 1</label>
<div class="layui-input-block">
<input type="text" name="num1" required lay-verify="required" placeholder="Please enter the value 1" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Value 2</label>
<div class="layui-input-block">
<input type="text" name="num2" required lay-verify="required" placeholder="Please enter the value 2" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Operator</label>
<div class="layui-input-block">
<select name="operator" lay-verify="required">
<option value="add">Addition</option>
<option value="subtract">Subtraction</option>
<option value="multiply">Multiplication</option>
<option value="divide">Division</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">Calculate results</button>
<p style="color: red;"></p>
</div>
</div>
</form>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack. png" alt="" title="">
Step 3: Write JavaScript code
Add JavaScript code to the page to handle the form submission event and implement the 4 arithmetic functions.
<script>
layui.use(['jquery', 'layer'], function(){<!-- -->
var $ = layui.jquery;
var layer = layui.layer;
//Listen for submission
$("form").on('submit(formDemo)', function(e){<!-- -->
e.preventDefault(); //Prevent default behavior
//Get form data
var num1 = parseFloat($("input[name='num1']").val());
var num2 = parseFloat($("input[name='num2']").val());
var operator = $("select[name='operator']").val();
//Calculate based on operators
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("The divisor cannot be 0");
return;
}
result = num1 / num2;
break;
}
//Show results
$("p").text("Calculation result:" + result);
});
});
</script>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack. png" alt="" title="">
Complete example code
Integrate the above code into a complete HTML file, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui 4 arithmetic operations example</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
<script src="//i2.wp.com/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">Value 1</label>
<div class="layui-input-block">
<input type="text" name="num1" required lay-verify="required" placeholder="Please enter the value 1" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Value 2</label>
<div class="layui-input-block">
<input type="text" name="num2" required lay-verify="required" placeholder="Please enter the value 2" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Operator</label>
<div class="layui-input-block">
<select name="operator" lay-verify="required">
<option value="add">Addition</option>
<option value="subtract">Subtraction</option>
<option value="multiply">Multiplication</option>
<option value="divide">Division</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">Calculate results</button>
<p style="color: red;"></p>
</div>
</div>
</form>
<script>
layui.use(['jquery', 'layer'], function(){<!-- -->
var $ = layui.jquery;
var layer = layui.layer;
//Listen for submission
$("form").on('submit(formDemo)', function(e){<!-- -->
e.preventDefault(); //Prevent default behavior
//Get form data
var num1 = parseFloat($("input[name='num1']").val());
var num2 = parseFloat($("input[name='num2']").val());
var operator = $("select[name='operator']").val();
//Calculate based on operators
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("The divisor cannot be 0");
return;
}
result = num1 / num2;
break;
}
//Show results
$("p").text("Calculation result:" + result);
});
});
</script>
</body>
</html>
</code><img class="look-more-preCode contentImg-no-view" src="//i2.wp.com/csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreBlack. png" alt="" title="">