Demo: [Code] Khung thông báo ngẫu nhiên đơn giản/đẹp. 109E42z

CSS:

Code:

 #thbao {
    padding:6px 0;
    border-bottom:1px solid #e6dac3;
    }

    #thbao-margin {margin: 0 auto;}
    .thbao-container {
    width:98%;
    border: 1px solid #f2b768;
    padding: 4px;
    font-size:90%;
    }
    .thbao-header {
    background: #ff6734;
    color: white;
    border:1px solid #ffa789;
    padding: 5px 10px;
    white-space: nowrap;
    }
    .thbao-body {
    background: #fae9c8;
    padding: 5px 10px;
    width: 99%;
    }
    .thbao-close {
    float: right;
    margin-right: -5px;
    }



Script:

Code:

function hideitem() {
    document.getElementById("thbao").style.display="none";
    }
    //<![CDATA[
    thbao = new Array(3);
    thbao[0]='{Nội dung đoạn thông báo thứ 1}';
    thbao[1]='{Nội dung đoạn thông báo thứ 2}';
    thbao[2]='{Nội dung đoạn thông báo thứ 3}';
    thbao[3]='{Nội dung đoạn thông báo thứ 4}';

    tbindex = Math.floor(Math.random() * thbao.length);
    //]]>



HTML:

Code:

<div id="thbao">
    <div id="thbao-margin" class="thbao-container">
    <table cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td class="thbao-header"><b>Note</b></td>
    <td class="thbao-body">
    <a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
    <span class="thbao-text">

    <script type="text/javascript">
    document.write(thbao[tbindex]);
    </script>

    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>


Hoặc bạn có thể chèn thằng code sau vào nơi muốn hiển thị:

Code:

<style type="text/css">
    #thbao {
    padding:6px 0;
    border-bottom:1px solid #e6dac3;
    }

    #thbao-margin {margin: 0 auto;}
    .thbao-container {
    width:98%;
    border: 1px solid #f2b768;
    padding: 4px;
    font-size:90%;
    }
    .thbao-header {
    background: #ff6734;
    color: white;
    border:1px solid #ffa789;
    padding: 5px 10px;
    white-space: nowrap;
    }
    .thbao-body {
    background: #fae9c8;
    padding: 5px 10px;
    width: 99%;
    }
    .thbao-close {
    float: right;
    margin-right: -5px;
    }
    </style>

    <script language="JavaScript">
    function hideitem() {
    document.getElementById("thbao").style.display="none";
    }
    //<![CDATA[
    thbao = new Array(3);
    thbao[0]='{Nội dung đoạn thông báo thứ 1}';
    thbao[1]='{Nội dung đoạn thông báo thứ 2}';
    thbao[2]='{Nội dung đoạn thông báo thứ 3}';
    thbao[3]='{Nội dung đoạn thông báo thứ 4}';

    tbindex = Math.floor(Math.random() * thbao.length);
    //]]>
    </script>


    <div id="thbao">
    <div id="thbao-margin" class="thbao-container">
    <table cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td class="thbao-header"><b>Note</b></td>
    <td class="thbao-body">
    <a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
    <span class="thbao-text">

    <script type="text/javascript">
    document.write(thbao[tbindex]);
    </script>

    </span>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>