js day19

1.仿微博發(fā)表評論

1)css樣式

*{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}
input{
    border:0;
}
li{
    list-style: none;
}
.container{
    width:800px;
    margin:0 auto;
    /*border:1px solid #000;*/
    padding:20px;
}
input{
    border:1px solid #666;
    width:100%;
    height:100px;
    padding-left:10px;
}
.content>p{
    font-weight: bold;
    font-size: 20px;
    padding:10px;
}
.content>p>span{
    font-weight: normal;
    font-size:14px;
    margin-left:400px;
}
.content>button{
    width:70px;
    height:40px;
    line-height: 40px;
    background: #e4393c;
    border-radius: 5px;
    border:0;
    font-size: 16px;
    font-weight: bold;
    color:#fff;
    margin-top:10px;
    margin-left:90%;
}
.main{
    width:100%;
    border:1px solid #000;
    overflow: hidden;
    border-radius: 20px;
    margin-top:20px;
     padding:0 10px;
}
.main>img,.main>p{
     float:left;
}
.main>img{
    width:100px;
    height:100px;
}
.main>p{
    width:500px;
    height:100px;
    line-height: 100px;
    padding-left:50px;
    /*border:1px solid #000;*/
}
.main>button{
    width:70px;
    height:40px;
    line-height: 40px;
    background: #e4393c;
    border-radius: 5px;
    border:0;
    font-size: 16px;
    font-weight: bold;
    color:#fff;
    float:right;
    margin-top:30px;
}

2)div

<div class='container'>
    <div class='content'>
        <p>你想對樓主說點什么 <span>你最多可輸入30個字符</span></p>
        <input type="text" name="" placeholder="請輸入你想要說的內(nèi)容">
        <button>發(fā)表</button>
    </div>
</div>

3)script

把圖片做成隨機數(shù)

var btn=document.querySelector('.content>button');
btn.onclick=function(){
    var inputVal=document.querySelector('.content>input').value;
    //動態(tài)創(chuàng)建元素:
    //動態(tài)創(chuàng)建div
        var div=document.createElement('div');
        div.className='main';
        var img=document.createElement('img');
        var arr=['img/1.jpg','img/2.jpg','img/3.jpg'];
        var num=Math.floor(Math.random()*3);
        img.src=arr[num]; 
        div.appendChild(img);
        var p=document.createElement('p');
        p.innerHTML=inputVal;
        document.querySelector('.content>input').value='';
        div.appendChild(p);
        var button=document.createElement('button');
        button.innerHTML='刪除';
        button.onclick=function remov(){
            this.parentElement.parentElement.removeChild(this.parentElement);
        }
        div.appendChild(button);
        document.querySelector('.container').appendChild(div);     
}

2.仿新浪微博發(fā)布評論js代碼

1)css樣式

.main{
    width: 800px;
    margin:20px auto;
}
span{
    display: inline-block;
    width: 200px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    text-align: left;
    margin-bottom: 10px;
}
.tag{
    font-size: 13px;
    margin-left: 370px;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 0;
}
.text{
    width: 750px;
    height: 180px;
    margin:0 auto;
    resize:none;
}
input{
    display: inline-block;
    width: 80px;
    height: 50px;
    background: #E2526F;
    border: 0;
    margin-left: 670px;
    margin-top: 10px;
}
.creatediv{
    width: 675px;
    height: 80px;
    border: 1px solid gray;
    position: relative;
    margin-top: 10px;
    padding-left: 75px;
}
.createinput{
    width: 80px;
    height: 30px;
    position:absolute;
    right: 5px;
    bottom:5px;
}
.createimg{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 15px;
    left: 15px;
}
.createdivs{
    width:600px;
    height:50px;
    position: absolute;
    top: 15px;
    left: 85px;
}

2)div

<div class="main">
    <span>你想對樓主說點什么</span>
    <span class="tag">你最多可以輸入30個字符</span>
    <textarea id="text" cols="30" rows="10" maxlength="30" class="text" spellcheck="false"></textarea><br>
    <input type="button" value="發(fā) 表" id="ipt">
    <div id="txt" ></div>
</div>

3)script

var textarea=document.getElementById("text");
var ipt=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
    var txtValue=textarea.value;
    if(txtValue.length>0){
        var divs=document.createElement("div");
        var imgs=document.createElement("img");
        var ps=document.createElement("p");
        var inputs=document.createElement("input");
        divs.setAttribute("class","creatediv");
        imgs.setAttribute("class","createimg");
        ps.setAttribute("class","createdivs");
        inputs.setAttribute("class","createinput");
        img.src="pic/1.jpg";
        input.type="button";
        inputs.value="刪除";
        ps.innerHTML=txtValue;
        divs.appendChild(imgs);
        divs.appendChild(ps);
        divs.appendChild(inputs);
        if(txt.children.length==0){
            txt.appendChild(divs);
        }else{
            txt.insertBefore(divs,get_firstChild(txt));
        }

        inputs.onclick=function(){
            this.parentElement.parentElement.removeChild(this.parentElement)
        }
    }
}
var textarea=document.getElementById("text");
    var inputs=document.getElementById("ipt");
    var txt=document.getElementById("txt");
    ipt.onclick=function(){
        var txtValue=textarea.value;
        if(txtValue.length>0){
            var divs=document.createElement("div");
            var imgs=document.createElement("img");
            var ps=document.createElement("p");
            var inputs=document.createElement("input");
            divs.setAttribute("class","creatediv");
            imgs.setAttribute("class","createimg");
            ps.setAttribute("class","createdivs");
            inputs.setAttribute("class","createinput");
            imgs.src="pic/1.jpg";
            inputs.type="butto";
            inputs.value="刪除";
            ps.innerHTML=txtValue;
            divs.appendChild(imgs);
            divs.appendChild(ps);
            divs.appendChild(inputs);
            if(txt.children.length==0){
                txt.appendChild(divs)
            }else{
                txt.appendChild(divs,get_firstChild(txt));
            }

            inputs.onclick=function(){
                this.parentElement
                        .parentElement
                        .removeChild(this.parentElement)
            }

        }
    }
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子资铡,更是在濱河造成了極大的恐慌煤墙,老刑警劉巖迄沫,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件龄毡,死亡現(xiàn)場離奇詭異赎瑰,居然都是意外死亡,警方通過查閱死者的電腦和手機当船,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進店門题画,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人德频,你說我怎么就攤上這事苍息。” “怎么了?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵竞思,是天一觀的道長表谊。 經(jīng)常有香客問我,道長盖喷,這世上最難降的妖魔是什么爆办? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮课梳,結果婚禮上距辆,老公的妹妹穿的比我還像新娘。我一直安慰自己暮刃,他們只是感情好跨算,可當我...
    茶點故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著椭懊,像睡著了一般诸蚕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上氧猬,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天挫望,我揣著相機與錄音,去河邊找鬼狂窑。 笑死媳板,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的泉哈。 我是一名探鬼主播蛉幸,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丛晦!你這毒婦竟也來了奕纫?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤烫沙,失蹤者是張志新(化名)和其女友劉穎匹层,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锌蓄,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡升筏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瘸爽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片您访。...
    茶點故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖剪决,靈堂內(nèi)的尸體忽然破棺而出灵汪,到底是詐尸還是另有隱情檀训,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布享言,位于F島的核電站峻凫,受9級特大地震影響,放射性物質發(fā)生泄漏览露。R本人自食惡果不足惜荧琼,卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一肛循、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦被盈、人聲如沸只怎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽景鼠。三九已至铛漓,卻和暖如春票渠,著一層夾襖步出監(jiān)牢的瞬間昂秃,已是汗流浹背肠骆。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工扫外, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留筛谚,地道東北人蚊伞。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像掠拳,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子胧奔,可洞房花燭夜當晚...
    茶點故事閱讀 43,666評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 1拐叉、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準控汉。 注意:講述HT...
    kismetajun閱讀 27,452評論 1 45
  • 今天是二年級一班家長駐校日。早晨我們六名家長先在校門口維持秩序测僵,然后進課堂聽兩節(jié)課街佑,最后參加升旗儀式。 ...
    怡然自得_cd3c閱讀 398評論 0 0
  • 把優(yōu)惠帶給顧客捍靠,把自己的客戶服務好沐旨,就是最好的廣告。 引入阿米巴管理模式 每個模塊(事務包)進行定價榨婆。每個部門自負...
    板塊閱讀 3,132評論 0 5
  • 有一個美麗的地方磁携,人們都把它向往,有一個美麗的地方纲辽,人們都把它向往颜武,那里四季常青,那里鳥語花香拖吼,那里沒有痛苦...
    山神山神閱讀 266評論 0 0