溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關js如何仿微博實現動態欄功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
效果圖：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博</title>
<style>
body, p, img, ul, li { margin: 0; padding: 0; }
body { background-image: url("http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742f92tpe2wve095ttp.jpg");}
li { list-style: none; }
.box {
padding-top: 20px;
margin: 20px auto;
width: 620px;
height: 180px;
position: relative;
background-color: #ffffff;
text-align: center;
}
.box label {
font: 18px/18px "微軟雅黑";
color: #cccccc;
position: absolute;
top: 60px;
left: 40px;
cursor: text;
}
.H {
float: left;
padding: 5px 0 5px 10px;
color: #426B80;
font: 400 16px/16px "宋體";
}
textarea {
padding: 5px;
border-color: #CCCCCC;
width: 580px;
height: 80px;
resize: none;
outline:none;
font: 400 18px "微軟雅黑";
color: #333333;
}
#button {
width: 80px;
height: 34px;
display: block;
background-color: #FFC09F;
position: absolute;
top: 148px;
right: 14px;
text-align: center;
line-height: 34px;
color: #ffffff;
cursor: pointer;
/*F7671D*/
}
.dynamic {
text-align: left;
padding: 10px 10px;
width: 580px;
height: 100%;
}
.user {
position: relative;
}
.user img {
border: solid 1px #CCCCCC;
vertical-align: top;
}
.user .name {
display: block;
position: absolute;
top: 8px;
left: 60px;
font: 600 18px/18px "微軟雅黑";
}
.time{
display: block;
position: absolute;
top: 55px;
left: 80px;
font: 500 10px/10px "微軟雅黑";
}
.dynamic .user {
margin: 10px 5px 0 10px;
}
.dynamic .list {
font: 500 16px/16px "微軟雅黑";
padding-left: 70px;
}
</style>
<script>
window.onload = function () {
//獲取當前時間函數
function time() {
var maydate = new Date();
var Time = maydate.getFullYear() + "-" + (maydate.getMonth()+1) +"-"+maydate.getDate()+" "+maydate.getHours()+":"+maydate.getMinutes();
return Time;
}
//獲取ID函數
function $(id) {return document.getElementById(id);}
//創建節點函數
function nweChild(id,text) {
//獲得節點ID
var parent = $(id);
//獲得body所有的孩子
var child = parent.parentNode.children;
//克隆當前節點和其所有子節點
var newNode = parent.cloneNode(true);
//給當前節點的父節點插入克隆的節點
parent.parentNode.insertBefore(newNode,child[1]);
//插入的克隆節點更換ID
child[1].id = id + (child.length - 2);
//改變時間
//獲取當前id節點的所有孩子
var idChild = child[1].children;
idChild[0].innerHTML = time();
idChild[2].innerHTML = $("text").value;
}
//獲得焦點改變邊框顏色和恢復默認字體顏色
$("text").onfocus = function () {
this.style.borderColor = "#FA7D3C";
this.style.color = "#333333";
}
//失去焦點恢復默然邊框顏色，改變字體顏色
$("text").onblur = function () {
this.style.borderColor = "#CCCCCC";
this.style.color = "#CCCCCC";
}
//監聽輸入事件
$("text").oninput = function () {
if($("text").value != ""){
//隱藏提示文本
$("txt").style.display = "none";
//文本域不為空 按鈕可點擊
$("button").style.backgroundColor = "#FF8140";
}else{
//顯示提示文本
$("txt").style.display = "block";
//文本域為空 按鈕不可點擊
$("button").style.backgroundColor = "#FFC09F";
}
}
//按鈕事件
$("button").onmousemove = function () {
//當文本域不為空執行下面按鈕事件
if($("text").value != ""){
$("button").onmouseout= function () {
//如果不為空 按鈕為亮色
if($("text").value != ""){
this.style.backgroundColor = "#FF8140";
}else {
//恢復按鈕為不可點擊顏色
$("button").style.backgroundColor = "#FFC09F";
}
}
//按鈕為高亮
this.style.backgroundColor = "#F7671D";
//調用節點函數，并把傳遞當前文本內容
$("button").onclick = function () {
if($("text").value != ""){
nweChild("order",$("text").value);
}
//清空當前文本
$("text").value = "";
//恢復按鈕為不可點擊顏色
$("button").style.backgroundColor = "#FFC09F";
//更改提示文本內容
$("txt").innerHTML = "你看，沒騙你吧！"
//顯示提示文本
$("txt").style.display = "block";
}
}
}
}
</script>
</head>
<body>
<div class="box">
<span class="H">有什么新鮮事想告訴大家？</span>
<textarea name="text" id="text"></textarea>
<label for="text" id="txt">輸入一段話，點發布會有驚喜哦！</label>
<span id="button">發布</span>
</div>
<div class="box dynamic" id="order">
<span class="time">2016-12-07 21:20</span>
<div class="user">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742m96ugh87fzxhuuxp.jpg" width=50; alt="頭像">
<span class="name">漫步未來</span>
</div>
<ul class="list">
<li>未來的你，一定會感謝現在拼命的自己。</li>
</ul>
</div>
</body>
</html>感謝各位的閱讀！關于“js如何仿微博實現動態欄功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
