两部分代码贴在一起交作业

原创 2018-11-02 09:24:43 131
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#webo{height:180px;width: 620px;border:10px

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#webo{

height:180px;

width: 620px;

border:10px solid #FFC0CB;

margin: 0px auto;

}

#webo_top{

height: 40px;

width:100%;

font-size: 14px;

color: #888888;

position: relative;

}

#webo_top img{

float: left;

position: absolute;

left:15px;

top:10px;

}

#top_num_font{

font-weight: bold;

line-height: 40px;

}

#top_font{

display: inline;

height: 40px;

margin-right: 30px;

float: right;

}

textarea{

height:103px;

width: 600px;

border: 1px solid #cccccc;

margin:0px 7px;

}

#webo_bottom{

padding: 0px 10px;


}

#webo_bottom div{

float:left;

height:28px;

width:60px;

background-repeat: no-repeat;

}

#webo_bottom span{

font-size: 12px;

color:#000000;

margin-left: 28px;

}

#bg_1{background-image: url(images/an5.png);}

#bg_2{background-image: url(images/an4.png);}

#bg_3{background-image: url(images/an3.png);}

#bg_4{background-image: url(images/an2.png);}

#bg_5{background-image: url(images/an1.png);}


#webo_bottom_right{

height: 28px;

width:150px;

float: right;

}

#webo_bottom_right span{

color:#888888;

font-size: 12px;

margin-right: 14px

}

input{

height:25px;

width: 80px;

background-color:#FFC09F;

border:none;

border-radius: 3px;

color:#fff;

}

/* 复选框css*/

#w_checkbox{

height: 300px;

width: 200px;

border: 1px solid #888;

padding: 5px;

margin:40px auto;

font-size: 14px;

}

#w_checkbox_head{

height: 50px;

border-bottom:1px solid #888;

}

#w_checkbox input{

height:15px;

width:15px;

}

</style>

<script type="text/javascript">

var text,num,m

window.onload=function(){

text=document.getElementById('webo_textarea')

num=document.getElementById('top_num_font')

bt=document.getElementById('bottom_button')

text.onkeyup=function aa(){

m=10-text.value.length

if (m<0){

num.style.color="red"

}else {

num.style.color="#888"

}

num.innerHTML=m

}

bt.onclick=function(){

if (m==10){

alert('你还没有输入内容')

text.focus()

}

else if (m<0){

alert('你输入的字数超出限制了')

text.focus()

}

else {

alert('你已成功提交')

}

}

aa()

}

//复选框script



function checkall(){

var item,checkall

item=document.getElementsByName('chh')

checkall=document.getElementById('chh_all')

for(i=0;i<item.length;i++){

if(checkall.checked){

item[i].checked=true

}else{

item[i].checked=false

}

}

}

</script>


</head>

<body>

<div id="webo">

<div id="webo_top">

<img  src="images/12.png">

<div id="top_font">还可以输入<span id="top_num_font"></span>字</div>

</div>


<textarea id="webo_textarea"></textarea>

<div id="webo_bottom">

<div id="bg_1"><span >表情</span></div>

<div id="bg_2"><span >图片</span></div>

<div id="bg_3"><span >视频</span></div>

<div id="bg_4"><span >话题</span></div>

<div id="bg_5" style="width:70px;"><span >长微博</span></div>

</div>


<div id="webo_bottom_right">

<span>公开</span>

<input type="button" name="button" id="bottom_button" value="提交">

</div>

</div>

<!--复选框-->

<div id="w_checkbox">

<div id="w_checkbox_head">

<input type="checkbox"  id="chh_all" value="" onclick="checkall()"><label for="chh_all">全选</label>

</div>


<div id="w_checkbox_body">

<label><input type="checkbox"  name="chh" value="">A.上海</label>

<label><input type="checkbox"  name="chh" value="">B.北京</label>

</div>

</div>

</body>

</html>


发布手记

热门词条