仿腾迅微博

最新推荐文章于 2024-07-12 16:27:40 发布

swanhung

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量1.3k

点赞数

文章标签： function class javascript apple div filter

本文链接：https://blog.csdn.net/swanhung/article/details/7658676

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿腾讯微博</title>
<style>
body{margin:0px;padding:0px;font-size:12px;}
input,span,ul,li,h1,form{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
a img{border:none;}
#box{width:700px;height:auto;margin:0 auto;margin-top:10px;}
#bx{width:600px;height:auto;float:left;border:1px solid #222;border-radius:5px;background:#FFF;padding:20px;}
#top{width:500px;height:30px;float:left;margin-bottom:20px;}
#top .top-usename{width:100px;height:30px;line-height:30px;padding:0 5px;float:left;outline:none;border:1px solid #666;border-radius:5px;margin-right:20px;}
#top .top-useicon{width:200px;height:20px;float:left;}
.top-useicon li{width:30px;height:30px;float:left;border:1px solid #222;border-radius:5px;margin-right:5px;cursor:pointer;filter:alpha(opacity=30);opacity:0.3;}
.top-useicon li.imopacity,.top-useicon li.hover{filter:alpha(opacity=100);opacity:1;}
.top-useicon li img{width:29px;height:29px;border-radius:5px;}
#inputBox{width:500px;height:100px;float:left;line-height:20px;border:1px solid #888;border-radius:5px;outline:none;text-align:top;}
#inputBo{width:500px;height:30px;float:left;text-align:right;margin-top:10px;}
#inputBo .maxNum{font-size:16px;font-weight:700;margin:0 5px;}
#inputBo .inbt{width:50px;height:20px;text-align:center;line-height:20px;background:green;padding:5px 10px;color:#FFF;text-decoration:none;border-radius:2px;margin-left:10px;}
#lis{width:500px;height:auto;float:left;}
#lis li{width:450px;height:60px;float:left;border-bottom:1px dashed #888;padding:5px;margin-bottom:10px;}
#lis li .lisimg{width:60px;height:60px;float:left;border:1px solid #777;margin-right:10px;}
#lis li .liscon{width:350px;line-height:25px;float:left;}
#lis li .liscon a{color:#F96;margin-right:5px;text-decoration:none;}
#lis li .listime{width:350px;line-height:20px;float:left;}
#lis li .del{width:350px;float:left;text-align:right;display:none;}
#lis li.on{background:#FC9}
.none{display:none;}
</style>
<script>
/*****获取id,class,tagName*******/
var get={
byId:function(id)
{
return typeof id === "string" ? document.getElementById(id) : id;
},
byClass:function(aclass)
{
var classElement=[];
var allElement=document.getElementsByTagName("*");
for(var i=0;i<allElement.length;i++){
if(allElement[i].className == aclass)
{
classElement[classElement.length]=allElement[i];
}
}
return classElement;
},
byTagName:function(elem,obj)
{
//return (obj || document).getElementsByTagName(elem);
return (obj || document).getElementsByTagName(elem)
}
};
/**********绑定事件**********/
var EventUntil={
addHandler:function(oElement,sEvent,fnHandler)
{
oElement.addEventListener ? oElement.addEventListener(sEvent,fnHandler,false) : oElement.attachEvent("on" + sEvent,fnHandler);
},
removeHandler:function(aElement,aEvent,fnHandler)
{
aElement.removeEventListener ? aElement.removeEventListener(aEvent,fnHandler,false) : aElement.attachEvent("on" + aEvent,fnHandler);
},
addLoadHandler:function(fnHandler)
{
this.addHandler(window,"load",fnHandler);
}
};

/********设置css样式*********/
//function css(obj,attr,value)
//{
// switch(arguments.length)
// {
// case 2:
// if(typeof arguments[1] == "object")
//{
// for(var i in attr) i=="opacity" ? (obj.style["filter"]="alpha(opacity=" + attr[i]+")",obj.style[i]=attr[i] / 100) : obj.style[i]=attr[i];
//}
//else
//{
// return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];

//currentStyle这一特定于 IE 的属性应用于元素的所有 CSS 属性的级联组。它是 Window.getComputedStyle() 的仅用于 IE 的替代。
//}
// break;
// case 3:
// attr == "opacity" ? (obj.style["filter"]="alpha(opacity=" + value +")",obj.style[attr]=value / 100) : obj.style[attr] =value;
// attr == "opacity" ? (obj.style["filter"]="alpha(opacity=" + value +")",obj.style[attr]=value / 100) : obj.style[attr] =value;
// break;

// }
// }
/************格式化时间**************/
function oFomat(times)
{
return times.toString().replace(/^(\d)$/,"0$1");//查找全部的数字，如果是1位的，则在前面加0
}

/********控制字符的大小******************/
function checkWord(evt)
{
var inem=document.getElementsByTagName("em")[0];
if(evt==null)
{
evt =window.event;
}
var src = evt.srcElement? evt.srcElement : evt.target;
var str = src.value;
len = 140;
myLen = 0;
i = 0;
Other = 140;
for(;(i<str.length)&&(myLen<=len);i++)
{
myLen++;
if(str.charCodeAt(i)<0||str.charCodeAt(i)>len)
{
len=Other;
}
}
if(myLen>len)
{
alert("您输入超过限定长度");
src.value=str.substring(0,i-1);
}
if(len-myLen>0)
{
inem.innerHTML=(len-myLen);
}
else
{
inem.innerHTML=0;
}
}

EventUntil.addLoadHandler(
function()
{
var tuname=get.byId("ut");
var tuicon=get.byClass("top-useicon");
//var tuli=document.getElementById("top").getElementsByTagName("li");
var tuli=get.byTagName("li",get.byId("top"));
var inems=get.byClass("maxNum");
var inbt=document.getElementsByTagName("a")[0];
var inbox=get.byId("inputBox");
var oUl=get.byId("lis");
var oli=get.byTagName("li",get.byId("lis"));
/***按钮点击提交判断****/
inbt.οnclick=function()
{
//alert("s");
if(tuname.value == "")
{
alert("名字会有更多人关注你");
tuname.focus();
}
else if(inbox.value =="")
{
alert("随时记录生活");
inbox.focus();
}
else if(tuname.value.length <=2 || tuname.value.length >= 10)
{
alert("名字是2个以上10以下，这样更容易被别人查找的");
//this.value=this.value.substring(0,10)
tuname.focus();
}
else
{
var lit=document.createElement("li");
var oDate=new Date();
lit.innerHTML="<img src=\'"+ get.byClass("imopacity")[0].childNodes[0].src + "\' class=\'lisimg'\><div class=\'liscon'\><a href=\'javascript:'\>" + tuname.value + "</a><span>" + inbox.value + "</span></div><div class=\'listime'\>" + oFomat(oDate.getFullYear()) +"年 " + oFomat(oDate.getMonth()+1) +"月 "+ oFomat(oDate.getDate())+ "日 "+ oFomat(oDate.getHours())+":"+oFomat(oDate.getMinutes()) + "</div><div class=\'del'\><a href=\'javascript:void(0)'\>删除</a></div>";
oli.length ? oUl.insertBefore(lit,oli[0]) : oUl.appendChild(lit);
//重置表单
tuname.value="";
inbox.value="";
for(var i=0;i<tuli.length;i++) tuli[i].className="";//把其它的className重置为空，
tuli[0].className="imopacity";//把第一个li的className重置为imopacity;
}
lihover();
lidel();
}
/****提交完重置inem值*****/
inbox.οnchange=function(event){
var event=event || window.event;
checkWord(event);
}
inbox.οnfοcus=function(event){
var event=event || window.event;
checkWord(event);
}
inbox.οnkeyup=function(event)
{
var event=event || window.event;
checkWord(event)
}
/***小头像移过跟点击事件****/
for(var i=0;i<tuli.length;i++)
{
tuli[i].index=i;
EventUntil.addHandler(tuli[i],"mouseover",function(){
this.className +=" hover";//注意这里，hover前面得加一个空格
});
EventUntil.addHandler(tuli[i],"mouseout",function(){
this.className=this.className.replace(/\s?hover/,"");
});
EventUntil.addHandler(tuli[i],"click",function()
{
for(var i=0;i<tuli.length;i++) tuli[i].className="";
this.className="imopacity";
});
}
/****lis移动事件********/
function lihover(){
for(var i=0;i<oli.length;i++)
{
oli[i].index=i;
oli[i].οnmοuseοver=function()
{
this.className="on";
var del=get.byClass("del")[this.index];
del.style.display='block';
}
oli[i].οnmοuseοut=function()
{
this.className="";
var del=get.byClass("del")[this.index];
del.style.display='none';
}
}
}
lihover()//初始化函数
/******lis删除事件*******/
function lidel()
{
var del=get.byClass("del");
var aA=get.byTagName("a",get.byId("lis"));
for(var i=0;i<aA.length;i++)
{
aA[i].index=i;
EventUntil.addHandler(aA[i],"click",function(){
var oParent=this.parentNode.parentNode;
oParent.style.display="none";
})
}
}
lidel();

}
)
</script>
</head>
<body>
<div id="box">
<div id="bx">
<form>
<div id="top">
<input type="text" value="" class="top-usename" id="ut">
<ul class="top-useicon">
<li class="imopacity"><img src="apple_1_bigger.jpg"></li><li><img src="apple_2_bigger.jpg"></li><li><img src="apple_1_bigger.jpg"></li><li><img src="apple_2_bigger.jpg"></li>
</ul>
</div>
<textarea id="inputBox" class=""></textarea>
<div id="inputBo">
还可以输入<em class="maxNum">140</em>字<a href="javascript:void(0)" class="inbt">就这样</a>
</div>
</form>
<ul id="lis">
<li>
<img src="apple_1_bigger.jpg" class="lisimg">
<div class="liscon"><a href="javascirpt:">123456</a><span>新增删除广播功能。</span></div>
<div class="listime">2012年05月16日 14:16</div>
<div class="del"><a href="javascript:void(0)">删除</a></div>
</li>
<li>
<img src="apple_2_bigger.jpg" class="lisimg">
<div class="liscon"><a href="javascirpt:">123456</a><span>新增删除广播功能。</span></div>
<div class="listime">2012年05月16日 14:16</div>
<div class="del"><a href="javascript:void(0)">删除</a></div>
</li>
<li>
<img src="apple_1_bigger.jpg" class="lisimg">
<div class="liscon"><a href="javascirpt:">123456</a><span>新增删除广播功能。</span></div>
<div class="listime">2012年05月16日 14:16</div>
<div class="del"><a href="javascript:void(0)">删除</a></div>
</li>
<li>
<img src="apple_2_bigger.jpg" class="lisimg">
<div class="liscon"><a href="javascirpt:">123456</a><span>新增删除广播功能。</span></div>
<div class="listime">2012年05月16日 14:16</div>
<div class="del"><a href="javascript:void(0)">删除</a></div>
</li>
</ul>
</div>
</div>
</body>
</html>

swanhung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿腾迅微博

仿腾讯微博 body{margin:0px;padding:0px;font-size:12px;} input,span,ul,li,h1,form{margin:0px;padding:0px;} ul,li{list-style-type:none;} a img{border:none;} #box{widt
复制链接

扫一扫