计算器与在线客服--2019年5月10日22时05分

计算器代码

实例

<div class="box">
		<h2>计算器</h2>
		<form>
			<table>
				<tr>
					<td><input type="text" name="opt1" placeholder="操作数1" autofocus></td>
					<td>
						<select name="option">
							<option value="null">请选择操作</option>
							<option value="add"> + </option>
							<option value="sub"> - </option>
							<option value="mul"> * </option>
							<option value="div"> / </option>
						</select>
					</td>
					<td><input type="text" name="opt2" placeholder="操作数2"></td>
					<td><button type="button">计算</button></td>
				</tr>
				<tr>
					<td colspan="2" align="right"><h3>结果:</h3></td>
					<td colspan="2" align="left"><h3 id="result"></h3></td>
				</tr>
			</table>
		</form>
	</div>

<script>
    //1.获取操作数,按钮与结果占位符
		var opt1 = document.getElementsByName('opt1')[0];
		var opt2 = document.getElementsByName('opt2')[0];
		var opt  = document.getElementsByName('option')[0];
		var btn = document.getElementsByTagName('button')[0];
		var result = document.getElementById('result');
btn.onclick = function(){
			var data1 = 0;
			var data2 = 0;

            // 进行判断输入框是不是空和内容是不是数字
			if (opt1.value.length === 0 ) {
				alert('第一个操作数不能为空');
				opt1.focus();
				return false;
			} else if (isNaN(opt1.value)) {
				alert('第一个操作数必须为数字');
				opt1.focus();
				return false;
			} else if (opt2.value.length === 0) {
				alert('第二个操作数不能为空');
				opt2.focus();
				return false;
			} else if (isNaN(opt2.value)) {
				alert('第二个操作数必须为数字')
				opt2.focus();
				return false;
			} else {
				data1 = parseFloat(opt1.value);
				data2 = parseFloat(opt2.value);
			}
			

			var option  = opt.value;
			var temp = 0;
			var flag = '';

            // 进行数字计算
			switch (option){
				case 'null':
					alert("请选择操作类型");
					opt.focus();
					return false;
				case 'add':
					flag = '+';
					temp = data1 + data2;
					break;
				case 'sub':
					flag = '-';
					temp = data1 - data2;
					break;
				case 'mul':
					flag = '*';
					temp = data1 * data2;
					break;
				case 'div':
					flag = '/';
					if (data2 === 0) {
						alert('除数不能为0,请重新输入');
						opt2.focus();
						return false;
					} else {
						temp = data1 / data2;
						//保留小数点2位
						temp = Math.round(temp * 100) / 100;
					}					
					break
			}


			var str = '<span style="color:coral">';
			str += data1+' '+flag+' '+data2 + ' = ' + temp ;
			str += '</span>';
            result.innerHTML = str;
}
            </script>

在线客服代码

实例

  <div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text" autofocus></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>	
    </div>
    <script>
    var btn = document.getElementsByTagName('button')[0];
		var text = document.getElementsByName('text')[0];
		var list = document.getElementsByTagName('ul')[0];
		var sum = 0;
        
        
        btn.onclick = function(){
            // 判断内容是不是空
            if (text.value.length === 0){
                alert('你是不是忘记输入内容了?');
                return false;
            };
            var userComment = text.value;


            // 清空输入框
            text.value = '';


            // 创建一个li
            var li = document.createElement('li');
            li.innerHTML = userComment;
            // 设置头像,然后把头像和内容合并
            var userPic = '<img src="../0508/images/peter.jpg" width="30" style="border-radius:50%">';
			li.innerHTML = userPic+userComment;
            // 插入到对话里面
            list.appendChild(li);
			sum += 1;



            setTimeout(function(){
				var info = ['你好烦人呀,本姑娘好累,不知道怜香惜玉吗?','除了退货,退款,维修,什么问题都可以问','啥事呀,我的帅哥哥'];
				var temp = info[Math.floor(Math.random()*3)];  //获取随机的内容
				//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
				var reply = document.createElement('li');  /*创建新元素用来保存回复内容*/
				var kefuPic = '<img src="../0508/images/zly.jpg" width="30" style="border-radius:50%;">';
				// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
				reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>';
				// reply.style.float = 'right'

				list.appendChild(reply);  //将回复内容添加到窗口中
				sum += 1;  // 回复内容计数加1
                
        },2000);
        			//如果回复内容大于10条则清空聊天窗口
			if (sum > 10) {
				list.innerHTML = '';  //清空内容
				sum = 0;  // 清空计数器
			}
        }
        
        
        </script>