js控住DOM實現發佈微博簡單效果

来源:http://www.cnblogs.com/duenyang/archive/2016/08/29/5819468.html
-Advertisement-
Play Games

這段代碼的效果具體是輸入標題和內容,點擊發佈把消息發佈出去,並使最新的消息始終在內容的最上面,代碼為: 這段代碼主要運用了一些DOM節點操作的知識,純屬學習之餘練手作品,大家可以參考參考。 ...


這段代碼的效果具體是輸入標題和內容,點擊發佈把消息發佈出去,並使最新的消息始終在內容的最上面,代碼為:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博消息效果</title>
    <style>
    *{margin:0;padding: 0;}
    .warp{
        width: 600px;
        margin:50px auto 0;
        background-color: #ccc;
    }
    #box{
        width: 600px;
        height: 340px;
        /*background-color: #ccc;*/
        position: relative;
        /*overflow: hidden;*/
        /*margin:50px auto 0;*/
        font-family: '微軟雅黑';
    }
    #box .span1{
        position: absolute;
        font-size: 16px;
        line-height: 16px;
        top: 10px;
        left: 5px;
    }
    #box .span2{
        position: absolute;
        font-size: 16px;
        line-height: 16px;
        top: 50px;
        left: 5px;
    }
    #title{
        position: absolute;
        width: 460px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        text-indent: 5px;
        left: 70px;
        top: 6px;
    }
    #text{
        position: absolute;
        width: 460px;
        height: 250px;
        resize: none;
        top: 50px;
        left: 70px;
        text-indent: 5px;
        font-size: 16px;
    }
    #box #prompt{
        position: absolute;
        top: 312px;
        left: 340px;
    }
    #prompt1{
        position: absolute;
        top: 312px;
        left: 340px;
        display: none;
    }
    #send{
        position: absolute;
        height: 25px;
        width: 60px;
        line-height: 20px;
        font-size: 16px;
        top: 310px;
        right: 68px;
    }
    #news{
        list-style: none;
        width: 490px;
        margin:10px auto 0px;
        padding-bottom: 5px;
    }
    #news li{
        width: 490px;
        font-size: 14px;
        overflow: hidden;
        background-color: #fff;
        margin-bottom: 5px;
        position: relative;
    }
    #news li h1{
        font-size: 16px;
        line-height: 20px;
    }
    #news li p{
        text-indent: 5px;
        clear: left;
    }
    #news li span{
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
    }
    #news span:hover{
        color: red;
    }
    </style>
</head>
<body>
    <div class="warp">
        <div id="box">
            <span class='span1'>標題:</span>
            <input id="title" type="text">
            <span class="span2">內容:</span>
            <textarea id="text"></textarea>
            <em id="prompt">還可以輸入<var id="textnum">200</var></em>
            <em id="prompt1">你已超出<var id="textnum1"></var></em>
            <button id="send">發送</button>
        </div>
        <ul id="news">
                <li><h1></h1><span></span>
                        <p></p>
                </li>
            </ul>
    </div>
    <script>
        var title=document.getElementById('title');
        var text=document.getElementById('text');
        var send=document.getElementById('send');
        var ul=document.getElementById('news');
        var lis=ul.getElementsByTagName('li');
        var prompt=document.getElementById('prompt');
        var prompt1=document.getElementById('prompt1');
        var textnum=document.getElementById('textnum');
        var textnum1=document.getElementById('textnum1');
        var timer1=null,timer2=null;
        send.onclick=function(){
            if (text.value==''||title.value=='') {
                alert('親~標題或內容不能為空');return false;
            }
            lis[0].innerHTML='<h1>'+title.value+'</h1><span>×</span><p>'+text.value+'</p>';
            lis[0].children[1].setAttribute('id','close');
            var newLi=document.createElement('li');
            ul.insertBefore(newLi,lis[0]);
            maxheight=lis[1].clientHeight;
            lis[1].style.height=0+'px';
            var x=0;
            var minstep=0;
            var maxstep=20;
            var change=maxheight/maxstep;
            clearInterval(timer1);
            timer1=setInterval(function(){
                minstep++;
                if (minstep>=maxstep) {
                    clearInterval(timer1);
                }
                x+=change;
                lis[1].style.height=x+'px';
            },10)
            title.value='';
            text.value='';
            var close=document.getElementById('close');
             for (var i = 0; i < lis.length; i++) {
                 close.onclick=function(){
                     var isme=this.parentNode;
                     var x=this.parentNode.clientHeight;
                    var minstep=0;
                    var maxstep=20;
                    var change=x/maxstep;
                    clearInterval(timer1);
                    timer1=setInterval(function(){
                        minstep++;
                        if (minstep>=maxstep) {
                            clearInterval(timer1);
                            ul.removeChild(isme);
                        }
                        x-=change;  
                        isme.style.height=x+'px';
                    },10)
                   // ul.removeChild(lis[i]);//不可以,不知道綁定的是第幾個。
                 }
             }
         }
        text.onfocus=function(){
            // console.log(prompt.children[0].innerHTML);//children是指帶有標簽的子節點;
            timer2=setInterval(function(){
                if(text.value.length<190){
                    var num=200-text.value.length;
                    textnum.style.color='black';
                    // prompt.style.color='black';
                    textnum.innerHTML=num;//
                    // prompt.innerHTML='還可以輸入<var id="textnum">'+num+'</var>字</em>';
                }
                if (text.value.length>=190&&text.value.length<=200){
                    var num=200-text.value.length;
                    // prompt.style.color='black';
                    textnum.style.color='red';//為什麼不變紅呢?因為這他妹的也是一個未來事件!
                    // prompt.innerHTML='還可以輸入<var id="textnum">'+num+'</var>字</em>';
                    textnum.innerHTML=num;
                }
                if (text.value.length>200){
                    var num=text.value.length-200;
                    // prompt.style.color='red';
                    prompt.style.display='none';
                    prompt1.style.display='block';
                    textnum1.style.color='red';
                    textnum1.innerHTML=num;
                   
                }
                // console.log(text.value.length);
            },50)    

        }
        text.onblur=function(){
            clearInterval(timer2);
        }
    </script>
</body>
</html>

這段代碼主要運用了一些DOM節點操作的知識,純屬學習之餘練手作品,大家可以參考參考。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • (原文來自:http://www.jb51.net/shouce/perl.htm) ...
  • URL中參數的值為中文時,servlet接收後顯示為亂碼,如下圖: 這時候需要修改tomcat的中的server.xml文件。該文件路徑為 tomcat安裝目錄下的conf文件夾。 為修改前的server.xml文件。 修改後的server.xml文件。增加了一行: URIEncoding="UTF ...
  • 一、CSS DIV網頁佈局中當解析度小於等於1024px(像素)時,DIV佈局對象顯示1000px寬度,當解析度大於1024px時候顯示1200px寬度等需求。使用CSS實現改變瀏覽器顯示寬度從而實現佈局的網頁寬度動態改變變化(網頁寬度自動隨瀏覽器顯示寬度而變寬變窄)。隨著發展,越來越多的電腦用戶顯 ...
  • github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass語法是: sass --watch test.scss:test.css --style expanded 如下圖: 1 導入外部文件,預設文件尾碼預設是sas ...
  • ...
  • 可以使用js來實現簡單的碰壁反彈效果,具體的內容請大家參考代碼部分。 其中movex和movey兩個變數是判斷運動的方向。 ...
  • 一,定義和用法 所有瀏覽器都支持 <a> 標簽。 <a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。 <a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。 在所有瀏覽器中,鏈接的預設外觀是: 未被訪問的鏈接帶有下劃線而且是藍色的 已被訪問的鏈接帶有下劃線而且是紫色的 活動鏈接帶有下劃 ...
  • 一些簡單的字元串操作,歡迎大家參考學習。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...