< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 微信聊天< /title> < style> .box{ margin: 0 auto; width: 800px; height: 800px; border: 1px solid black; } .box_1{ position: absolute; width: 800px; height: 100px; border-top: 1px solid black; margin-top: 699px; background: rgb( 187, 185, 185) ; } width: 100px; height: 100px; margin-left: 10px; float: left; } margin-left: 50px; margin-top: 25px; width: 400px; height: 50px; font-size: 35px; float: left; } width: 50px; height: 56px; margin-top: 25px; float: left; margin-left: 20px; } .text{ height: 759px; width: 757px; overflow: auto; } .text li{ list-style: none; clear: both; } .text img{ width: 100px; height: 100px; display: block; } .text p{ width: 400px; height: 50px; border: 1px solid black; } .left,.righ{ width: 800px; height: 100px; } .left img{ float: left; } .left p{ float: left; margin-left: 12px; } .right img{ float: right; } .right p{ float: right; margin-right: 12px; } < /style>
< /head>
< body> < div class= "box" > < div class= "box_1" > < img id= 'img' src= "./人头.png" alt= "" > < input id= 'input' type= "text" > < button id= 'button' > 发送< /button> < /div> < ul class= "text" > < ! -- < li class= "left" > < img src= "./人头 (1).png" alt= "" > < p> 你好< /p> < /li> < li class= 'right' > < img src= "./人头.png" alt= "" > < p> 你好< /p> < /li> --> < /ul> < /div> < script> var img = document.getElementById( 'img' ) var open = true img.onclick = function( ) { if( open) { img.src = './人头 (1).png' open = false } else{ img.src = './人头.png' open = true } } /*添加内容进ul1- 获取元素（按钮、头像、文字、list）2- 给按钮绑定点击事件3- 获取头像地址，以及文字内容( 如果内容为空不允许发送) 4- 扔到list里面去*/var button = document.getElementById( 'button' ) var input = document.getElementById( 'input' ) var text = document.querySelector( '.text' ) button.onclick = function( ) { var value = input.value if( value == '' ) { alert( '请输入合法字符' ) } else{ if( open) { text.innerHTML = ' <li class="left"><img src="./人头.png" alt=""><p>' + value +'</p></li>' + text.innerHTML} else{ text.innerHTML = ' <li class="right"><img src="./人头 (1).png" alt=""><p>' + value +'</p></li>' + text.innerHTML} } } /*注意: 1. 清除 text li 的浮动2. 加一个滚动条3. 开关 open 条件为真的话 4. 图片是是添加的并不是覆盖5. 给text 添加滚动条*/< /script>
< /body>
< /html>
