作业1、一个小型计算器
学习到了 isNaN() 判断当前传入的值是否为数字 是数字范围false 其他返回true
parseFloat 转换成浮点型 转换方便数值相加
parseInt 转换成整数型 转换方便数值相加
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
.wrap{
background-color: #ffc09f;
height: 100px;
width: 500px;
text-align: center;
margin: 0 auto;
}
input{
width: 50px;
}
.box{
margin-top: 5px;
width: inherit;
}
</style>
</head>
<body>
<div class="wrap">
<h3>简单计算器</h3>
<label for="comment1">第一个数:</label>
<input type="text" id="comment1">
<select id="symbol">
<option value="add"> + </option>
<option value="less"> - </option>
<option value="mul"> * </option>
<option value="exc"> / </option>
</select>
<label for="comment2">第二个数:</label>
<input type="text" id="comment2">
<button id="btn">计算</button>
<div class="box">
<span>结果为:</span>
<span></span>
</div>
</div>
<script>
let comment1 = document.getElementById('comment1');
let comment2 = document.getElementById('comment2');
let symbol = document.getElementById('symbol');
let span = document.getElementsByTagName('span')[1];
btn.onclick =function () {
if (comment1.value.length ===0){
alert('第一个数不能为空');
return false;
} else if (isNaN(comment1.value)){
alert('第一个数只能为数字');
return false;
} else if (comment2.value.length ===0){
alert('第二个数不能为空');
return false;
} else if (isNaN(comment2.value)) {
alert('第二个数只能为数字');
return false;
}else{
// 转换到整数
// parseInt()
// 转换到小数
var data1 = parseFloat(comment1.value);
var data2 = parseFloat(comment2.value);
}
switch (symbol.value) {
case 'add':
span.innerHTML = data1 + data2;
break;
case 'less':
span.innerHTML = data1 - data2;
break;
case 'mul':
span.innerHTML = data1 * data2;
break;
case 'exc':
span.innerHTML = data1 / data2;
break;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2、在线客服功能
学习到了函数命令
setTimeout(需要延迟的函数,延迟时间毫秒) 延迟执行第一个参数的函数
Math.floor（） 取一串数字的整数 舍去小数部分
Math.random（） 获取一串随机数值 Math.random（）*5 意思是定义随机数值的最大数
Math.floor(Math.random()*5) 返回的数值意思是 返回一个0-5的随机数
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<style>
.wrap{
width: 500px;
/*height: 800px;*/
background-color: #656565;
padding-top: 10px;
padding-bottom: 10px;
}
.box1{
margin: 0 auto;
width: 470px;
height: 630px;
background-color: lightseagreen;
border: 5px solid lightseagreen;
}
.box2{
margin: 1px auto;
/*float: bottom;*/
width: 470px;
height: 100px;
background-color: lightseagreen;
border: 5px solid lightseagreen;
}
textarea{
float: left;
width: 370px;
height: 80px;
margin-top: 10px;
}
button{
float: right;
width: 90px;
height: 85px;
margin-top: 10px;
}
ul li{
color: white;
list-style: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">
<ul>
</ul>
</div>
<div class="box2">
<div class="box2_1">
<textarea autofocus></textarea>
<button onclick="add(this)">发送</button>
</div>
</div>
</div>
<img src="" alt="">
<script>
let text = document.getElementsByTagName('textarea')[0];
let ul = document.getElementsByTagName('ul')[0];
var sun = 0;
function add(){
// alert(text.value);
if (text.value.length === 0) {
alert('你没有输入内容');
return;
}
sun += 1;
if (sun > 9){
ul.innerHTML ='';
sun =0;
}
let li = document.createElement('li');
li.innerHTML = '<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3018968254,2801372361&fm=26&gp=0.jpg" width="30px;" style="border-radius:50%">';
li.innerHTML += text.value;
ul.append(li);
text.value ='';
text.focus();
// 延迟命令
setTimeout(function () {
// 声明数组
var item = [
'你好！',
'欢迎光临!',
'有问题您请说',
'您需要什么呢',
'我这里什么都有'
];
var reply = document.createElement('li');
// floor取整数 random生成随机数 后面的5是需要生成随机数的数量
reply.innerHTML = '<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557726818826&di=68f5b77eae24c68095d47e6282d27947&imgtype=jpg&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161210%2Fa3dad2bdaaa946d0bafc87ebf702da10_th.jpeg" width="30px;" style="border-radius:50%;">';
reply.innerHTML += item[Math.floor(Math.random()*5)];
ul.append(reply);
text.value ='';
text.focus();
},1000);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例