资讯专栏INFORMATION COLUMN

javascript新手实例3-仿手机聊天界面(if else运用)

Chaz / 3128人阅读

摘要:今天给大家一个的小示例,其中我在文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试老规矩,先上图代码模拟手机短信发送发送代码代码正则也可以匹配,不过正则的效率

今天给大家一个if else的Javascript小示例,其中我在js文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试:

老规矩,先上图:

</>复制代码

  1. html代码

</>复制代码

  1. 模拟手机短信发送

</>复制代码

  1. css代码

</>复制代码

  1. body {
  2. background: #000;
  3. }
  4. .phoneBox {
  5. background: url(phoneBg.jpg) no-repeat;
  6. width: 289px;
  7. height: 594px;
  8. margin: 50px auto;
  9. }
  10. .phoneContent {
  11. width: 237px;
  12. height: 370px;
  13. float: left;
  14. overflow-x: hidden;
  15. margin: 87px 0 0 26px;
  16. }
  17. #phoneContrl {
  18. float: left;
  19. margin: 7px 0 0 30px;
  20. }
  21. .emo, #textInput {
  22. height: 32px;
  23. border: 1px solid #ded5e6;
  24. border-radius: 5px;
  25. float: left;
  26. margin-right: 3px;
  27. }
  28. .emo {
  29. width: 31px;
  30. cursor: pointer;
  31. background: url(em1.jpg) no-repeat center;
  32. }
  33. #textInput {
  34. width: 135px;
  35. padding: 0 0 0 5px;
  36. }
  37. #textSet {
  38. height: 32px;
  39. cursor: pointer;
  40. width: 47px;
  41. border: none;
  42. background: #f7f7f7;
  43. font-size: 16px;
  44. line-height: 32px;
  45. text-align: center;
  46. }
  47. .user1, .user2 {
  48. width: 100%;
  49. float: left;
  50. margin: 10px 0;
  51. font-size: 15px;
  52. }
  53. .user1 .userLogo,.user1 .userText,.user2 .userLogo,.user2 .userText {
  54. float: left;
  55. width: 30px;
  56. margin: 0 2px;
  57. }
  58. .user1 .userText, .user2 .userText {
  59. width: auto;
  60. max-width: 165px;
  61. background: #ded6e7;
  62. color: #333;
  63. border-bottom: 2px solid #b4b0b9;
  64. padding: 5px;
  65. border-radius: 5px;
  66. }
  67. .user2 .userLogo,.user2 .userText {
  68. float: right;
  69. }
  70. .user2 .userText {
  71. background: #21c616;
  72. color:#fff;
  73. border-bottom: 2px solid #0c7506;
  74. }

</>复制代码

  1. Javascript代码

</>复制代码

  1. window.onload = function () {
  2. function luka(element) {
  3. //if (/#/.test(element) == true) 正则也可以匹配,不过正则的效率没有函数高,貌似任何语言都是
  4. if (element.indexOf("#") > -1) {
  5. return document.getElementById(element.replace(/#/,""));
  6. };
  7. if (element.indexOf(".") > -1) {
  8. return document.getElementsByClassName(element.replace(/./g,""));
  9. };
  10. if (/^[a-zA-Z]+&/.element = true) {
  11. return document.getElementsByTagName(element);
  12. };
  13. };
  14. luka(".emo")[0].onclick = function() {
  15. var _logo = luka(".emo")[0].getAttribute("_logo")
  16. if ( _logo == 1 ){
  17. luka(".emo")[0].setAttribute("style","background:url(em2.jpg) no-repeat center");
  18. luka(".emo")[0].setAttribute("_logo","2");
  19. };
  20. if ( _logo == 2 ){
  21. luka(".emo")[0].setAttribute("style","background:url(em1.jpg) no-repeat center");
  22. luka(".emo")[0].setAttribute("_logo","1");
  23. };
  24. };
  25. luka("#textSet").onclick = function() {
  26. if ( luka("#textInput").value == "") {
  27. alert("还没有输入任何内容");
  28. }
  29. else {
  30. var creatDiv = document.createElement("div")
  31. //这种方式是完全参考gif的效果,但是用户体验不好
  32. if(luka(".emo")[0].getAttribute("_logo") == 1) {
  33. creatDiv.className = "user1"; //id title className 可以用这种方式设置,style能设置,但是无法赋值
  34. luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]);
  35. luka(".user1")[0].innerHTML = "";
  36. luka(".user1")[0].innerHTML += "
    "+ luka("#textInput").value +"
    ";
  37. };
  38. if(luka(".emo")[0].getAttribute("_logo") == 2) {
  39. creatDiv.className = "user2"; //id title className 可以用这种方式设置,style能设置,但是无法赋值
  40. luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]);
  41. luka(".user2")[0].innerHTML = "";
  42. luka(".user2")[0].innerHTML += "
    "+ luka("#textInput").value +"
    ";
  43. };
  44. /*
  45. 这种写法,实现的就是每次都在上一条消息的下面来显示最新消息,这种体验才是正确的
  46. 代码应该可以再优化一下,效果还可以做一下实现内容多的时候,滚动条跟着滚动
  47. _childOneDivNmu,_childTwoDivNmu是为了知道第几个元素,不然每一次都在更新第一个元素
  48. if(luka(".emo")[0].getAttribute("_logo") == 1) {
  49. creatDiv.className = "user1"; //id title className 可以用这种方式设置,style能设置,但是无法赋值
  50. luka(".phoneContent")[0].appendChild(creatDiv);
  51. var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childOneDivNmu"));
  52. //console.log(childNum);
  53. luka(".phoneContent")[0].setAttribute("_childOneDivNmu",childNum+1);
  54. //var childNum = luka("#");
  55. luka(".user1")[childNum].innerHTML = "";
  56. luka(".user1")[childNum].innerHTML += "
    "+ luka("#textInput").value +"
    ";
  57. };
  58. if(luka(".emo")[0].getAttribute("_logo") == 2) {
  59. creatDiv.className = "user2"; //id title className 可以用这种方式设置,style能设置,但是无法赋值
  60. luka(".phoneContent")[0].appendChild(creatDiv);
  61. var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childTwoDivNmu"));
  62. //console.log(childNum);
  63. luka(".phoneContent")[0].setAttribute("_childTwoDivNmu",childNum+1);
  64. //var childNum = luka("#");
  65. luka(".user2")[childNum].innerHTML = ""
  66. luka(".user2")[childNum].innerHTML += "
    "+ luka("#textInput").value +"
    "
  67. };*/
  68. };
  69. };
  70. }

</>复制代码

  1. 知识点

  2. if else的运用,初学在js中使用正则表达式

  3. 使用insertBefore把元素插入到某个元素之前

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51365.html

相关文章

  • javascript新手实例3-仿手机聊天界面if else运用

    摘要:今天给大家一个的小示例,其中我在文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试老规矩,先上图代码模拟手机短信发送发送代码代码正则也可以匹配,不过正则的效率 今天给大家一个if else的Javascript小示例,其中我在js文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试: ...

    Faremax 评论0 收藏0
  • javascript新手实例3-仿手机聊天界面if else运用

    摘要:今天给大家一个的小示例,其中我在文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试老规矩,先上图代码模拟手机短信发送发送代码代码正则也可以匹配,不过正则的效率 今天给大家一个if else的Javascript小示例,其中我在js文件里写了很多注释,有兴趣的同学自己看注释,另外对于聊天界面的显示方式,我写了两种,大家也可以分别试试: ...

    bingchen 评论0 收藏0
  • 基于Vue2实现的仿手机QQapp(支持对话功能,滑动删除....)—— 聊聊开发过程中踩到的一些坑

    摘要:使用进行的仿手机的的制作,在上,参考了设计师的作品,作品由个人独立开发,源码中进行了详细的注释。关于接入聊天机器人遇到的跨域问题起初,天真的以为官方应该提供了用的接口,然而没有找到。 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释。 由于自己也是初学Vue2,所以注释写的不够精简,请见谅。 目前已实...

    williamwen1986 评论0 收藏0
  • 如何做一个自己的开源聊天项目?(仿微信)

    摘要:一个轻量级高效率的支持聊天与物联网的通讯框架从月初到现在已经大约已经三个月了,由于一直没有时间与精力很好的维护这个项目,心里一直有所歉意。希望本项目对你有所帮助,我的目标暂定,一个小众加物联网的开源通讯项目。 篇幅较长,感谢阅读。 万事开头难 在我决定做开源是因为自身工作接触到大多数的项目都是基于开源大佬写的框架,自觉惭愧,工作以来一直忙于业务与功能实现,多多少少做过的几个项目也没能抽...

    Zachary 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<