1. 程式人生 > >使用jQuery快速高效製作網頁互動特效 第三章 上機練習三 製作課工場論壇發帖

使用jQuery快速高效製作網頁互動特效 第三章 上機練習三 製作課工場論壇發帖

 <script type="text/javascript">

  //我要發帖
  var num = 0;
  function Posting() {
    if (num == 0) {
      document.getElementsByClassName("post")[0].style.display="block";
      num = 1;
    } else if (num == 1) {
      document.getElementsByClassName("post")[0].style.display="none";
      num = 0;
    }
  }

  //陣列:儲存頭像
  var tou = new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");

  //獲取填寫資訊併發布
  function Publish() {
    if (num == 1) {
      /*獲取填寫的各項值*/
      var Title = document.getElementsByClassName("title")[0].value;      //標題
      var Block = document.getElementsByTagName("select")[0].value;       //所屬版塊
      var Content = document.getElementsByClassName("content")[0].value;  //內容
      //獲取釋出時間
      var myDate = new Date();
      var Time = myDate.getFullYear() + "-" + myDate.getMonth() + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes();

      //獲取隨機數選擇頭像
      var iNum = Math.floor(Math.random() * 3 + 0);

      /*插入發帖內容*/
      var bName = document.getElementsByTagName("section")[0];
      var ul = document.createElement("ul");
      ul.innerHTML = "<li>" + "<div>" + "<img src=\"images/" + tou[iNum] + "\">" + "</div>" + "<h1>" + Title + "</h1>" + "<p>" + "<span>所屬版塊:" + Block + "</span>" + "<span>" + Time + "</span>" + "</p>" + "</li>";
      bName.appendChild(ul);

      /*釋出成功收起彈出*/
      document.getElementsByClassName("post")[0].style.display="none";
      num = 0;

      /*清除填寫的各項值*/
      document.getElementsByClassName("title")[0].value = "";
      document.getElementsByTagName("select")[0].value = document.getElementsByTagName("option")[0].value;
      document.getElementsByClassName("content")[0].value = "";
    }
  }

</script>