1迷你计算器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
.wyc{
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="wyc">
<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 {
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 在线客服功能的实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<style>
.wyc{
width: 500px;
/*height: 500px;*/
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="wyc">
<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(){
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="image/chj1jpg.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="image/zfy1.jpg" 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>运行实例 »
点击 "运行实例" 按钮查看在线实例