正确封装函数fnc2 连续点击弹出“恭喜点击来两次” 正确完成页面的排版 对于输入的数据 进行判断是否为纯数字 如果为纯数字 则弹出“您的快递正在运输中” 如果不为纯数字 则弹出“您的单号有误” 代码
时间: 2023-09-15 07:17:27 浏览: 39
好的,针对您的需求,我为您提供以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<style>
/* 页面排版样式 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
#container {
width: 500px;
margin: 50px auto;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 20px;
text-align: center;
}
input {
padding: 5px;
margin: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px;
margin: 10px;
border: none;
background-color: #4CAF50;
color: #ffffff;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h1>页面标题</h1>
<input type="text" id="input" placeholder="请输入单号">
<br>
<button onclick="fnc2()">点击</button>
</div>
<script>
// 封装函数fnc2,连续点击弹出“恭喜点击来两次”
var count = 0;
function fnc2() {
count++;
if (count === 2) {
alert("恭喜点击来两次");
count = 0;
}
}
// 判断输入的数据是否为纯数字
function checkInput() {
var input = document.getElementById("input").value;
var reg = /^\d+$/;
if (reg.test(input)) {
alert("您的快递正在运输中");
} else {
alert("您的单号有误");
}
}
document.getElementById("input").addEventListener("blur", checkInput);
</script>
</body>
</html>
```
其中,封装的函数 fnc2 使用了一个计数器来记录点击次数,当点击次数为 2 时弹出“恭喜点击来两次”的提示框,然后将计数器重置为 0。输入框添加了 onblur 事件,在输入完成后进行数字判断。使用了正则表达式来判断输入是否为纯数字,如果是则弹出“您的快递正在运输中”的提示框,否则弹出“您的单号有误”的提示框。页面排版使用了 CSS 样式,使页面看起来更加美观。