先附图

　　

CSS部分：

<style>

    body{}

    *{margin:; padding:}

    li{list-style: none;}

    .container{ width:310px; height:600px; margin:20px auto 0; background: url('images/iphone.jpg'); position:

    relative;}

    #name{width:23px; height:23px; border:1px solid darkgrey; border-radius: 8px; padding:3px; cursor:pointer;}

    .main{bottom:64px; left:22px; border-top:1px solid darkgrey; position:absolute;padding:6px 4px 4px 7px;width: 258px;}

    #import{border-radius: 4px; height:18px; line-height:18px; border: 1px solid #b8b8b8; outline:;padding:5px; bottom:5px; position:relative; bottom:11px;width: 160px;}

    #enter{font: 18px 'Microsoft YaHei';bottom: 8px;  position: relative; cursor:pointer;}

    .content{width: 255px;height: 389px;top: 84px; position: relative;overflow: auto;

        padding: 0 0 0 28px;}

    .content li{ line-height:28px;margin-bottom: 15px;overflow: hidden;position: relative;}

    #inHtml img{width:25px; height:25px;position: relative;}

    .th{text-align: right;}

    .th img{float:right; margin-left:15px;}

    .ds img{    width: 25px;height: 25px;position: relative;float: left;margin-right: 15px;}

    .th p{background: forestgreen; text-align: left;padding: 3px 5px;border-radius: 4px;color: white; float:right;max-width: 182px;font:14px 'Microsoft YaHei'; }

    .ds p{background: dimgrey;float: left;text-align: left;padding: 3px 4px;border-radius: 4px;color: white;

        left: 32px;max-width: 190px; font:14px 'Microsoft YaHei';}

    .ds{ text-align: left;}

    .sent1{width:; height:; border:solid 8px; border-color: white white white forestgreen; position: absolute;right: 24px;top: 4px;}

    .sent2{width:; height:; border:solid 8px; border-color: white dimgrey white white ; position: absolute;left: 24px;top: 4px;}

</style>

JS部分：

<script>

    window.onload = function(){

        //给两个图片定义为一个数组

        var arr = ['images/tuhaoo.png','images/diaoshi.png'];

        //得到名称的图标

        var oName = $('name');

        //得到输入内容

        var oGet = $('import');

        //显示输入内容

        var oWrite = $('inHtml');

        //默认输入框显示光标

        oGet.focus();

        //默认显示土豪

        var onOff = true;

        oName.onclick = function () {

            if(onOff){

                oName.src = arr[1];

                onOff = false;

                oGet.focus();

            } else {

                oName.src = arr[0];

                onOff = true;

                oGet.focus();

            }

        }

        //发送事件

        var oSet = $('enter');

        oSet.onclick = function(){

            if(onOff){

                oWrite.innerHTML += '<li class="th">'+'<img src='+arr[0] + "/><p>" + oGet.value + '<span class="sent1"></span>' +"</p></li>";

            } else{

                oWrite.innerHTML += '<li class="ds">' + '<img src='+arr[1] + "/><p>" + oGet.value + '<span class="sent2"></span>' + "</p></li>";

            }

            oGet.value = '';

            oGet.focus();

        }

    }

    //调用ID通配符

    function $(id){

        return document.getElementById(id);

    }

</script>

Html部分：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <title>手机聊天界面</title>

</head>

<body>

<div class="container">

    <div class="content">

        <ul id="inHtml"></ul>

    </div>

    <div class="main">

        <img id='name' src="data:images/tuhaoo.png">

        <input id='import' type="text">

        <span id="enter">发送</span>

    </div>

</div>

</body>

</html>

JS案例练习-手机微信聊天对话框的更多相关文章

  1. HTML5仿手机微信聊天界面

    HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下     给大家带来的是HTML5仿手机微信聊天界面, ...

  2. 在类似qq或者微信聊天中。如何根据不同的手机发送图片

    原文:在类似qq或者微信聊天中.如何根据不同的手机发送图片   前一段时间,公司自己要求做多客服开发,但是对于发送图片这一块,当时很苦恼,我用自己的手机(米2)测试,不管是本地,还是云相册,最新照片. ...

  3. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  4. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  5. Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App

    基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom. svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+ ...

  6. 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...

  7. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  8. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

  9. 关于微信聊天与朋友圈如何快速切换 Mark

    用微信时,你是否遇到这样的情况.你正刷着朋友圈,享受着各种鸡汤,这时候,你收到一条微信,一看是女王大人,不得不回.你诚恳的回了一条,等了二十秒不见有什么回应,于是就退了出来,进入朋友圈找到那篇没看完的 ...

随机推荐

  1. 《精通Spring4.X企业应用开发实战》读后感第七章（AOP概念）

  2. HTML中的ID不能以数字开头

    最近在学习网页制作,发现ID在w3c规范里是不能以一个数字开头的,chrome浏览器是可以,firefox就不能使用数字开头了,其它浏览器未测试. 记录一下! W3C规范链接:http://www.w ...

  3. 基于netty框架的轻量级RPC实现（附源码）

    前言 Rpc( Remote procedure call):是一种请求 - 响应协议.RPC由客户端启动,客户端向已知的远程服务器发送请求消息,以使用提供的参数执行指定的过程.远程服务器向客户端发送 ...

  4. MAC电脑下Pycharm新建模板默认添加作者时间等信息

    在pycharm使用过程中,对于每次新建文件的shebang行和关于代码编写者的一些个人信息快捷填写,使用模板的方式比较方便. 方法如下: 1.打开pycharm,选择Pycharm-preferen ...

  5. Java8 使用 stream().filter()过滤List对象（查找符合条件的对象集合）

    内容简介 本文主要说明在Java8及以上版本中,使用stream().filter()来过滤一个List对象,查找符合条件的对象集合. List对象类(StudentInfo) public clas ...

  6. hdu2874(lca / tarjan离线 + RMQ在线)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2874 题意: 给出 n 个顶点 m 条边的一个森林, 有 k 个形如 x y 的询问, 输出 x, ...

  7. hdu3887 Counting Offspring

    Counting Offspring HDU - 3887 问你对于每个节点,它的子树上标号比它小的点有多少个 /* 子树的问题,dfs序可以很轻松的解决,因为点在它的子树上,所以在线段树中,必定在它 ...

  8. 基于rabbitMQ 消息延时队列方案 模拟电商超时未支付订单处理场景

    前言 传统处理超时订单 采取定时任务轮训数据库订单,并且批量处理.其弊端也是显而易见的:对服务器.数据库性会有很大的要求,并且当处理大量订单起来会很力不从心,而且实时性也不是特别好 当然传统的手法还可 ...

  9. EIGRP-8-路由器的邻接关系

    EIGRP路由器之间会建立并维护邻接关系.EIGRP在默认情况下会动态发现邻居路由器.也可以通过工程师手动配置(静态)发现邻居.   通过向目的组播组地址224.0.0.10或FF02: : A发送E ...

  10. poj 2348 Euclid's Game

    题目: 给两个整数a和b,两个人先后用较大的数减去较小数的整数倍,并且保证相减后为非负数.先把一个数变为0的人获胜. 分析: 很显然,当大数是小数的整数倍时为必胜态. 从这道题学会一个叫做自由度的东西 ...