2. 程式人生 > >JavaScript發帖案例

JavaScript發帖案例

阿新 • • 發佈：2019-02-16
window.onload=function(){ //頁面全部載入完成後，執行 var obtn=document.getElementById("btn");//我要發帖的按鈕 var opost=document.getElementById("post");//輸入面板 var osubmit=document.getElementById("submit");//釋出的按鈕 var ocontent=document.getElementById("content");//輸出列表內容 var tid;//定時器ID var flag=false;//用於標記滑鼠是否放在輸入面板上 //滑鼠放到按鈕上時 obtn.onmouseover=function
(){ opost.style.display="block"; } //滑鼠離開按鈕之後 obtn.onmouseout=function(){ timeDelay(); } //滑鼠放到輸入面板上 opost.onmouseover=function(){ flag=true; timeDelay(); } //滑鼠離開輸入面板後 opost.onmouseout=function(){ timeDelay(); } //有使用鍵盤的情況下 document.onkeydown=function(event){ flag=true; timeDelay(); } //時間延遲的方法 function timeDelay
(){ if(flag==false){ tid=setTimeout(function(){ opost.style.display="none"; },5000);//時間延遲5秒 } if(flag==true){ opost.style.display="block"; if(tid != "undefined"){ clearTimeout(tid); } } } var date=new Date();//獲取系統時間 //年 var year=date.getFullYear(); //月
var month=date.getMonth()+1; //日 var day=date.getDate(); //時 var hour=date.getHours(); //分 var minute=date.getMinutes(); //秒 var second=date.getSeconds(); //時間拼接 var time=year+"-"+addzero(month)+"-"+addzero(day)+" "+addzero(hour)+":"+addzero(minute)+":"+addzero(second) //時間補0函式 function addzero(num){ if(num<10){ return "0"+num; }else{ return num; } } //點擊發布，提交按鈕 osubmit.onclick=function(){ var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg"); flag=false; opost.style.display="none"; ocontent.style.display="block"; //1.建立li節點 var li=document.createElement("li"); //2.建立img節點 var img=document.createElement("img"); var r=parseInt(Math.random()*tou.length);//隨機獲取圖片下標 img.src="images/"+tou[r]; li.appendChild(img); //將img追加到li末尾 //3.建立h1節點 var h1=document.createElement("h1"); var title=document.getElementById("title").value;//獲取標題內容 var bankuai=document.getElementsByTagName("select"); h1.innerHTML=title; li.appendChild(h1); //將h1追加到li末尾 //4.建立p節點 var p=document.createElement("p"); p.innerHTML="版塊："+bankuai[0].value+" 發表時間："+time; p.style.fontSize="12px"; p.style.color="#999"; li.appendChild(p); //將p追加到li末尾 li.style.borderBottom="1px dashed #dcdcdc"; //5.將建立好的li節點插入div#content下的ul中第一位 ocontent.firstElementChild.insertBefore(li,ocontent.firstElementChild.firstChild); }//點擊發布結束 }//window.onload結束

相關推薦

JavaScript發帖案例

window.onload=function(){ //頁面全部載入完成後，執行 var obtn=document.getElementById("btn");//我要發帖的按鈕 var opost=document.getElementById("post");//輸入面板 var osubmit=do

JavaScript入門案例

tran ext ring ble .org lis rip xhtml date <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

JavaScript事件案例

案例 1.0 put ext head button name tel als <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

JavaScript DOM案例點擊按鈕顯示隱藏div

body meta none isp 顯示 獲取 按鈕 wid title <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式 用戶輸入 ade 1.數據校驗 步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

Javascript小案例（一）：仿淘寶搜尋框使用者輸入事件的實現

淘寶是我們經常用的一個網上購物平臺，開啟淘寶網首頁，找到淘寶首頁的搜尋框，如下如所示： （截圖日期：2017年6月18日） 大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空

jQuery發帖案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &l

JavaScript部分案例

部分 pad lur ase node choice hang remove color 01、電燈的開關 <img id="light" src="img/off.gif"><script> /* 1、獲取圖片對象

2017.9.24 基於HTML+JavaScript+CSS的開發案例&&JavaScript+CSS+DIV實現表格變色

菜單 dex ear 位置 下層 定義 -s html 頂部 1.JavaScript+CSS+DIV實現下拉菜單 　　1.1 層標簽<div> 基本語法： 　　<div id="層編號" style="position:absoult;left:29px

【JavaScript】計數器+classList使用-純js案例：全選反選

nta ava count 改變 markdown 精簡 javascrip 案例 標簽 這兩天做了一個全選反選的案例，用了幾種方法，剛開始寫的磕磕絆絆，聽老師講解後理清思路，再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能，然後分步實現，不要攪在一起。下面幾

【JavaScript】動畫-小案例：小球運動

rand ner res onf mage borde 技術 star 初始 最近的講js運動框架時，做了一個小案例，隨機生成幾個小球，然後讓他們在頁面中跳動，碰到邊界就彈回來並修改顏色。效果如下： 代碼如下： 1 <!doctype html>

day27—JavaScript實現定時器及其應用案例

scrip tin 定時 定時器對象 延遲 day 方法 fun value 轉行學開發，代碼100天——2018-04-12 JavaScript中定時器有兩種，分別是setInterval和setTimeout;其用法如下： 開啟： setTimeout("fun

JavaScript中自定義函數以及文本框、radio、下拉框的值的獲取，結合淘寶競拍案例來理解。。。

支付寶 價格 select back html alt 文本框 lec 獲取 淘寶競拍案例： HTML部分代碼： <form action="#" method="post"> <h2>歡迎進入淘寶競拍</h2> &l

javascript教程系列41:表格全選反選,經典案例詳解

註冊事件 tag rap 優化 document iphone8 char value ipad <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g

JavaScript DOM操作案例點擊按鈕選擇菜單

cli option code scrip itl -c nbsp round span 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

JavaScript DOM操作案例點擊按鈕顯示隱藏div優化後

元素 clas src com 點擊事件 cti charset round dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript DOM操作案例點擊按鈕修改div的屬性

asc onclick comm cli 顏色 代碼 val dom 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript DOM操作案例點擊按鈕實現網頁開關燈

lang 網頁 dom操作 javascrip tle function () click pre <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JavaScript DOM操作案例點擊按鈕通過類樣式的方式顯示跟隱藏div

java javascrip 樣式 ack eight class htm lang charset <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

JavaScript DOM操作案例美女相冊

one cli als padding add ear all tel ret <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &