3月30日作业 - 每日作业

Home > List of blog posts > 3月30日作业

Blogger Information

Blog 44

fans 3

comment 3

visits 34057

Special Recommendation

More>

Related recommendations

1.仿机器人聊天窗口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.实战: 仿机器人聊天窗口</title>
	<style type="text/css">
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: lightskyblue;
			margin: 30px auto;
			color: #333;
			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;
		}
		
		ul {
			list-style: none;
			line-height: 2em;
			/*border: 1px solid red;*/
			overflow: hidden;
			padding: 15px;
		}

		table {
			width: 90%;
			height:80px;
			margin: auto;
		}

		textarea{
			/*width: 300px;*/
			border: none;
			resize: none;
			background-color: lightyellow;
			
		}
		button {
			width: 60px;
			height: 40px;
			background-color: seagreen;
			color: white;
			border: none;
			/*text-align: left;*/

		}
		button:hover {
			cursor: pointer;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>	
	</div>
	<script type="text/javascript">
		//获取到页面中的按钮,文本域,对话内容区
		var btn = document.getElementsByTagName('button')[0]
		var text = document.getElementsByName('text')[0]
		var list = document.getElementsByTagName('ul')[0]
		var sum = 0

		//添加按钮点击事件,获取用户数据并推送到对话窗口中
		btn.onclick = function () {
			// alert(text.value)
			//获取用户提交的内容
			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="../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="../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

			},2000)
			
			
			if (sum > 10) {
				list.innerHTML = ''
				sum = 0
			}

		}


	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.选项卡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS选项卡</title>
    <style>
        h2 {
            text-align: center;
        }

        .box {
            width: 538px;
            height: 500px;
            background-color: white;
            border: 1px solid #ccc;
            margin: 20px auto;
            color: #363636;
        }

        .box > ul {
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            /*border-bottom: 1px solid #ccc;*/
            overflow: hidden;
        }

        .box > ul li {
            list-style-type: none;
            width: 90px;
            height: 36px;
            float: left;

            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;

            text-align: center;
            line-height: 36px;
        }

        .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-type: none;
        }

        .box div ul li {
            line-height: 1.5em;
            /*background-color: yellow;*/
        }

        .box div ul li a {
            color: #636363;
            text-decoration: none;
        }

        .box div ul li a:hover {
            color: #000;
        }

        .box div ul li span {
            float: right;
            color: red;

        }

    </style>
</head>
<body>
<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="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
            <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
        </ul>
    </div>
</div>

<script>
    //获取元素
    var box = document.getElementsByClassName('box')[0]
    var ul = box.getElementsByTagName('ul')[0]
    var tab = ul.getElementsByTagName('li')
    var list = box.getElementsByTagName('div')

    for (var i = 0; i < tab.length; i++) {
        //绑定索引值
        tab[i].index = i
        //初始化
        tab[i].onmouseover = function () {
            //清空标签的样式并将当前对列表隐藏
            for (var i = 0; i < tab.length; i++) {

                //第一步: 将除了当前选项卡之外的所有标签样式全部清空
                tab[i].className = ''

                //第二步: 将除了当前信息列表之外的列表全部隐藏
                list[i].style.display = 'none'
            }
            //设置用户当前操作的选项卡为高亮显示
            this.className = 'active'

            //将对应的信息列表显示出来
            list[this.index].style.display = 'block'
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄作业

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

sublime Text3常用插件以及安装方法

2018-03-18 21:53:58