摘要:今天給大家一個的小示例,其中我在文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試老規矩,先上圖代碼模擬手機短信發送發送代碼代碼正則也可以匹配,不過正則的效率
今天給大家一個if else的Javascript小示例,其中我在js文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試:
老規矩,先上圖:
html代碼
模擬手機短信發送
css代碼
body { background: #000; } .phoneBox { background: url(phoneBg.jpg) no-repeat; width: 289px; height: 594px; margin: 50px auto; } .phoneContent { width: 237px; height: 370px; float: left; overflow-x: hidden; margin: 87px 0 0 26px; } #phoneContrl { float: left; margin: 7px 0 0 30px; } .emo, #textInput { height: 32px; border: 1px solid #ded5e6; border-radius: 5px; float: left; margin-right: 3px; } .emo { width: 31px; cursor: pointer; background: url(em1.jpg) no-repeat center; } #textInput { width: 135px; padding: 0 0 0 5px; } #textSet { height: 32px; cursor: pointer; width: 47px; border: none; background: #f7f7f7; font-size: 16px; line-height: 32px; text-align: center; } .user1, .user2 { width: 100%; float: left; margin: 10px 0; font-size: 15px; } .user1 .userLogo,.user1 .userText,.user2 .userLogo,.user2 .userText { float: left; width: 30px; margin: 0 2px; } .user1 .userText, .user2 .userText { width: auto; max-width: 165px; background: #ded6e7; color: #333; border-bottom: 2px solid #b4b0b9; padding: 5px; border-radius: 5px; } .user2 .userLogo,.user2 .userText { float: right; } .user2 .userText { background: #21c616; color:#fff; border-bottom: 2px solid #0c7506; }
Javascript代碼
window.onload = function () { function luka(element) { //if (/#/.test(element) == true) 正則也可以匹配,不過正則的效率沒有函數高,貌似任何語言都是 if (element.indexOf("#") > -1) { return document.getElementById(element.replace(/#/,"")); }; if (element.indexOf(".") > -1) { return document.getElementsByClassName(element.replace(/./g,"")); }; if (/^[a-zA-Z]+&/.element = true) { return document.getElementsByTagName(element); }; }; luka(".emo")[0].onclick = function() { var _logo = luka(".emo")[0].getAttribute("_logo") if ( _logo == 1 ){ luka(".emo")[0].setAttribute("style","background:url(em2.jpg) no-repeat center"); luka(".emo")[0].setAttribute("_logo","2"); }; if ( _logo == 2 ){ luka(".emo")[0].setAttribute("style","background:url(em1.jpg) no-repeat center"); luka(".emo")[0].setAttribute("_logo","1"); }; }; luka("#textSet").onclick = function() { if ( luka("#textInput").value == "") { alert("還沒有輸入任何內容"); } else { var creatDiv = document.createElement("div") //這種方式是完全參考gif的效果,但是用戶體驗不好 if(luka(".emo")[0].getAttribute("_logo") == 1) { creatDiv.className = "user1"; //id title className 可以用這種方式設置,style能設置,但是無法賦值 luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]); luka(".user1")[0].innerHTML = ""; luka(".user1")[0].innerHTML += ""+ luka("#textInput").value +""; }; if(luka(".emo")[0].getAttribute("_logo") == 2) { creatDiv.className = "user2"; //id title className 可以用這種方式設置,style能設置,但是無法賦值 luka(".phoneContent")[0].insertBefore(creatDiv,luka(".phoneContent")[0].childNodes[0]); luka(".user2")[0].innerHTML = ""; luka(".user2")[0].innerHTML += ""+ luka("#textInput").value +""; }; /* 這種寫法,實現的就是每次都在上一條消息的下面來顯示最新消息,這種體驗才是正確的 代碼應該可以再優化一下,效果還可以做一下實現內容多的時候,滾動條跟著滾動 _childOneDivNmu,_childTwoDivNmu是為了知道第幾個元素,不然每一次都在更新第一個元素 if(luka(".emo")[0].getAttribute("_logo") == 1) { creatDiv.className = "user1"; //id title className 可以用這種方式設置,style能設置,但是無法賦值 luka(".phoneContent")[0].appendChild(creatDiv); var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childOneDivNmu")); //console.log(childNum); luka(".phoneContent")[0].setAttribute("_childOneDivNmu",childNum+1); //var childNum = luka("#"); luka(".user1")[childNum].innerHTML = ""; luka(".user1")[childNum].innerHTML += ""+ luka("#textInput").value +""; }; if(luka(".emo")[0].getAttribute("_logo") == 2) { creatDiv.className = "user2"; //id title className 可以用這種方式設置,style能設置,但是無法賦值 luka(".phoneContent")[0].appendChild(creatDiv); var childNum = parseInt(luka(".phoneContent")[0].getAttribute("_childTwoDivNmu")); //console.log(childNum); luka(".phoneContent")[0].setAttribute("_childTwoDivNmu",childNum+1); //var childNum = luka("#"); luka(".user2")[childNum].innerHTML = "" luka(".user2")[childNum].innerHTML += ""+ luka("#textInput").value +"" };*/ }; }; }
知識點
if else的運用,初學在js中使用正則表達式
使用insertBefore把元素插入到某個元素之前
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51365.html
摘要:今天給大家一個的小示例,其中我在文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試老規矩,先上圖代碼模擬手機短信發送發送代碼代碼正則也可以匹配,不過正則的效率 今天給大家一個if else的Javascript小示例,其中我在js文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試: ...
摘要:今天給大家一個的小示例,其中我在文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試老規矩,先上圖代碼模擬手機短信發送發送代碼代碼正則也可以匹配,不過正則的效率 今天給大家一個if else的Javascript小示例,其中我在js文件里寫了很多注釋,有興趣的同學自己看注釋,另外對于聊天界面的顯示方式,我寫了兩種,大家也可以分別試試: ...
摘要:使用進行的仿手機的的制作,在上,參考了設計師的作品,作品由個人獨立開發,源碼中進行了詳細的注釋。關于接入聊天機器人遇到的跨域問題起初,天真的以為官方應該提供了用的接口,然而沒有找到。 使用Vue2進行的仿手機QQ的webapp的制作,在ui上,參考了設計師kaokao的作品,作品由個人獨立開發,源碼中進行了詳細的注釋。 由于自己也是初學Vue2,所以注釋寫的不夠精簡,請見諒。 目前已實...
摘要:一個輕量級高效率的支持聊天與物聯網的通訊框架從月初到現在已經大約已經三個月了,由于一直沒有時間與精力很好的維護這個項目,心里一直有所歉意。希望本項目對你有所幫助,我的目標暫定,一個小眾加物聯網的開源通訊項目。 篇幅較長,感謝閱讀。 萬事開頭難 在我決定做開源是因為自身工作接觸到大多數的項目都是基于開源大佬寫的框架,自覺慚愧,工作以來一直忙于業務與功能實現,多多少少做過的幾個項目也沒能抽...
閱讀 3553·2021-11-25 09:43
閱讀 3135·2021-10-08 10:04
閱讀 1625·2019-08-26 12:20
閱讀 2053·2019-08-26 12:09
閱讀 595·2019-08-23 18:25
閱讀 3573·2019-08-23 17:54
閱讀 2322·2019-08-23 17:50
閱讀 803·2019-08-23 14:33