js 1 2题怎么做 20
3个回答
展开全部
1.html代码
<!DOCTYPE html>
<!-- saved from url=(0032)http://www.wydclub.com/index.php -->
<html lang="zh-CN" style="transform: none;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<meta name="applicable-device" content="pc,mobile">
<meta name="HandheldFriendly" content="true">
<meta name="robots" content="index,follow">
<title>HomeWork</title>
<meta name="Keywords" content="HomeWork">
<meta name="description" content="HomeWork">
<script src="./index.js"></script>
<link rel="stylesheet" rev="stylesheet" href="style.scss" type="text/css" media="all">
</head>
<body style="transform: none;">
<div class="content">
<div class="content_1">
用户名：<input placeholder="请输入用户名(字母数字下划线组合且不能以下划线开头)" id="username" value="" onblur="checkCheck()">
<span id="success">用户名可用</span>
<span id="failed">用户名无效</span>
</div>
<div class="content_2">
<div class="input-wrapper">
请输入第一个数：<input type="number" onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' placeholder="第一个数" value="" id="first">
</div>
<div class="input-wrapper">
请输入第二个数：<input type="number" onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' placeholder="第二个数" value="" id="second">
</div>
<div class="calc-btn">
<button onclick="calcFun('+')">+</button>
<button onclick="calcFun('-')">-</button>
<button onclick="calcFun('*')">*</button>
<button onclick="calcFun('/')">/</button>
</div>
<div class="input-wrapper">
结果：<input id="result" value="" placeholder="计算结果">
</div>
</div>
</div>
</body>
</html>
2.js代码
function checkCheck(u) {
u=document.getElementById('username').value;
let f1 = false; //长度判断
let f2 = false; //内容判断
var re = /[0-9a-zA-Z_]/gi;
if(u.length>=6 &&u.length <=16){
f1 = true;
if(re.test(u) && u.indexOf(0) !== '_'){
f2 = true;
}else {
f2 = false;
}
}else {
f1 = false;
}
if(f1 && f2){
document.getElementById('failed').style.display = "none";
document.getElementById('success').style.display = "inline-block";
return true;
}else {
document.getElementById('success').style.display = "none";
document.getElementById('failed').style.display = "inline-block";
return false;
}
}
function calcFun(arg) {
let first = parseInt(document.getElementById('first').value);
let second = parseInt(document.getElementById('second').value);
let result = '';
switch (arg) {
case '+':
result = first + second;
break;
case '-':
result = first - second;
break;
case '*':
result = first * second;
break;
case '/':
result = first / second;
break;
}
document.getElementById('result').setAttribute('value',result);
}3.css代码
*{
margin : 0;
padding : 0;
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#999;
font-size: 12px;
text-align: center;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#999;
font-size: 12px;
text-align: -moz-center;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;
font-size: 12px;
text-align: -moz-center;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#999;
font-size: 12px;
text-align: center;
}
input {
width: 400px;
}
.content {
box-sizing: border-box;
margin-top: 100px;
}
.content_1, .content_2 ,.input-wrapper{
margin: 20px auto;
max-width: 1200px;
}
#success {
display: none;
color: green;
padding-left: 15px;
}
#failed {
display: none;
color: red;
padding-left: 15px;
}
.calc-btn button{
width: 50px;
padding: 5px 20px;
display: table-cell;
margin-left: 50px;
}代码都在上面了，有什么不懂可以继续问，当然我只是简单实现了一下，不是什么标准答案，发现问题直接说哈；
最后，建议自己敲一遍代码，方便理解记忆
更多追问追答
追问
请问我这样写为什么会报错啊
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
