HTML5 imitation mobile WeChat chat interface_html5 tutorial skills-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 imitation mobile WeChat chat interface_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

html5

What I bring to you is the HTML5 imitation mobile WeChat chat interface. The screenshot effect is as follows:

The source code is as follows:

XML/HTML CodeCopy content to clipboard

>
<html>
<head>
<meta charset="UTF- 8">
<title>HTML5 simulated WeChat chat interfacetitle>
<style>
/**Reset label default style*/
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Microsoft Yahei'
width: 450px;
height: 780px;
background: #eee;
margin: 80px auto 0;
position: relative;
box-shadow: 20px 20px 55px #777;
.footer {
width: 430px;
height: 50px;
background: #666;
position: absolute;
bottom: 0;
padding: 10px;
}
.footer input {
width: 275px;
height: 45px;
outline: none;
font-size: 20px;
text-indent: 10px;
position: absolute;
border-radius: 6px;
right: 80px;
}
.footer span {
display: inline-block;
width: 62px;
height: 48px;
background: #ccc;
font-weight: 900;
line-height: 45px;
cursor: pointer;
text-align: center;
position: absolute;
right: 10px;
border-radius: 6px;
}
.footer span:hover {
color: #fff;
background: #999;
}
#user_face_icon {
display: inline-block;
background: red;
width: 60px;
height: 60px;
border-radius: 30px;
position: absolute;
bottom: 6px;
left: 14px;
cursor: pointer;
overflow: hidden;
}
img {
width: 60px;
height: 60px;
}
.content {
font-size: 20px;
width: 435px;
height: 662px;
overflow: auto;
padding: 5px;
}
.content li {
margin-top: 10px;
padding-left: 10px;
width: 412px;
display: block;
clear: both;
overflow: hidden;
}
.content li img {
float: left;
}
.content li span{
background: #7cfc00;
padding: 10px;
border-radius: 10px;
float: left;
margin: 6px 10px 0 10px;
max-width: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
.content li img.imgleft {
float: left;
}
.content li img.imgright {
float: right;
}
.content li span.spanleft {
float: left;
background: #fff;
}
.content li span.spanright {
float: right;
background: #7cfc00;
}
style>
<script>
window.onload = function(){
var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
var num = 0; //Control avatar change
var iNow = -1; //Used to accumulate and change left and right floats
var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
var btn = document.getElementById('btn');
var text = document.getElementById('text');
var content = document.getElementsByTagName('ul')[0];
var img = content.getElementsByTagName('img');
var span = content.getElementsByTagName('span');
icon[0].onclick = function(){
if(num==0){
this.src = arrIcon[1];
num = 1;
}else if(num==1){
this.src = arrIcon[0];
num = 0;
= function(){ if(
==''){ alert('Cannot send empty message');
<
><img src="' arrIcon[num] '"><span>' text.value 'span>li>'; iNow ;
num
img[iNow].className = 'imgright';
text.value = '';
// When there is too much content, place the scroll bar to the bottom
contentcontent.scrollTop=content.scrollHeight;
}
script>
head>
<body>
<div id="container" >
<div class="header" >
<span style=" float: left;">Amateur grass: simulated WeChat chat interfacespan>
<span style=" float: right;">14:21span>
div>
<ul class="content" >
ul>
<div class="footer" >
<div id="user_face_icon" >
<img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
div>
<input id="text" type="text" placeholder="Say something...">
<span id="btn" >Sendspan>
div>
div>
body>
html>

The above is the entire content of this article. Isn’t it exciting? I hope it will be helpful to everyone’s study.

Original text:http://www.xttblog.com/?p=265

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn