第一个是一个聊天的小案例
代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<style>
div:nth-child(1){
width: 450px;
height: 650px;
background-color: lightgoldenrodyellow;
margin: 30px auto;
color: #333333;
box-shadow: 2px 2px 2px #808080;
}
h2{
text-align: center;
margin-bottom: -10px;
}
div:nth-child(2){
width: 400px;
height: 500px;
border: 4px double green;
background-color: #efefef;
margin: 20px auto 10px;
overflow: scroll;
}
ul{
list-style: none;
line-height: 2em;
padding: 15px;
overflow: hidden;
}
table{
width: 90%;
height: 80px;
margin: auto;
/*border: 1px solid red;*/
}
textarea{
resize: none;
border: none;
background-color: whitesmoke;
}
button{
width: 60px;
height: 40px;
background-color: green;
color: #FFFFFF;
border:none;
}
button:hover{
cursor: pointer;
background-color: orangered;
}
</style>
</head>
<body>
<!--
contenteditable 属性规定是否可编辑元素的内容
true 规定可以编辑元素内容。
-->
<div contenteditable="true">
<h2>在线客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" id="" cols="50" rows="3"></textarea></td>
<td align="left"><button type="button">发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0]
var textField = document.getElementsByName('text')[0]
var list = document.getElementsByTagName('ul')[0]
btn.onclick = function () {
if (textField.value.length == 0){
alert("客官你是不是该要问点什么呢?")
return false
}
var userInfo = textField.value
textField.value = ''
//创建新节点
var list_li = document.createElement('li')
// list_li.innerHTML = userInfo
//创建头像图片
var useHeaderPic = '<img src="../0322源码/images/21.png" width="30" style="border-radius: 50%" >'
list_li.innerHTML = useHeaderPic+userInfo
//加入ul中
list.appendChild(list_li)
setTimeout(function () {
//创建一个本地数组
var tellArr = ['你好烦人呀,本姑娘好累,不知道怜香惜玉吗?','除了退货,退款,维修,什么问题都可以问','啥事呀,我的帅哥哥']
//取出一个随机元素
var randomTemp = tellArr[Math.floor(Math.random()*3)]
//创建一个回复的li元素
var reply = document.createElement('li')
//创建回复的头像
var replyHeader = '<img src="../0322源码/images/21.png" width="30" style="border-radius: 50%">'
//拼接元素内容
reply.innerHTML = replyHeader + '<span style="color:orangered">'+randomTemp+'</span>'
list.appendChild(reply)
},1800)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
第二个是一个选项卡案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
h2{
text-align: center;
}
.box{
width: 538px;
height: 500px;
background-color: lightyellow;
border: 1px solid #cccccc;
margin: 20px auto;
color: #363636;
}
.box > ul{
margin: 0px;
padding: 0px;
/*background-color: #66CCFF;*/
overflow: hidden;
}
.box>ul li{
list-style: none;
width: 90px;
height: 36px;
float: left;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: center;
line-height: 36px;
box-sizing: border-box;
}
/*给指定选择器后面紧跟的那个选择器选中的标签设置属性*/
.box ul+span{
float: right;
width: 90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul+span a{
color: #696969;
text-decoration: none;
}
.box li.active{
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div{
display: none;
}
.box div ul{
margin: 0;
padding: 10px;
list-style: none;
overflow: hidden;
}
.box div ul li{
line-height: 1.5em;
/*background-color: firebrick;*/
}
.box div ul li a{
color: #636363;
text-decoration: none;
}
.box div ul li a:hover{
color: black;
}
.box div ul li span{
float: right;
color: red;
}
</style>
</head>
<body>
<h2>选项卡</h2>
<div class="box">
<ul>
<li class="active">技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span>
<a href="">更多下载>></a>
</span>
<div style="display: block">
<ul>
<li>
<a href="">教程法法孙菲菲实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程发的发的所发生的实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程车比赛发挥法律和实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教法法程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程fd实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程法湿哒哒法实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程大大苏打实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实佛挡杀佛发沙发例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实辅导费例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实 法法例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">前端模板</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">原生手册</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">MySQL</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
<li>
<a href="">教程实例</a>
<span>2018-03-30</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//先获取选项卡和对应的区块信息列表
var box1 = document.getElementsByClassName('box')[0];
var ul = box1.getElementsByTagName('ul')[0];
var tab = ul.getElementsByTagName('li');
var list = box1.getElementsByTagName('div');
// 给每个选项卡添加事件：循环事件
for (var i=0;i<tab.length;i++){
// 给当前的每个选项卡添加一个自定义属性index 记录鼠标滑过的时候对应的index
tab[i].index = i;
// 给每个选项添加鼠标滑过事件
tab[i].onmouseover = function () {
// 清除标签的样式，把除了当前的选项卡和对应列表之外的标签样式全部清除
for (var j=0; j<tab.length; j++){
tab[j].className = ''
list[j].style.display = 'none'
}
this.className = 'active'
list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
