Chúng tôi sẽ tạo hai nút, một nút cho Tăng dần và một nút khác Giảm -
-
Khi nhấp vào Tăng (+), người dùng sẽ có thể tăng số trong số loại đầu vào
-
Khi nhấp vào Giảm (-), người dùng sẽ có thể giảm số trong số loại đầu vào
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input id=demoInput type=number min=100 max=110>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
function increment() {
document.getElementById('demoInput').stepUp();
}
function decrement() {
document.getElementById('demoInput').stepDown();
}
</script>
</body>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nếu bạn nhấp vào nút tăng (+) thì nút đó sẽ thêm 1. Khi nhấp vào giảm (-), 1 sẽ bị trừ.
Ở đây, tôi sẽ sử dụng nút +.
Điều này sẽ tạo ra kết quả sau -
