您的位置：首页 > Web前端 > JavaScript

JS操作的Html控件及其代码→学习笔记

2012-06-06 10:03 711 查看

<!DOCtype html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head>
<title>JS常操作的Html控件和代码</title>
</head>
<script>
//显示隐藏层
function opendiv(){
if(document.getElementById("show1").style.display=="none"){
document.getElementById("show1").style.display="";
document.getElementById("show2").style.display="none";
}else{
document.getElementById("show1").style.display="none";
document.getElementById("show2").style.display="";
}
}

//给层里面写内容
function writediv(){
document.getElementById("write1").innerHTML=document.getElementById("writeinfo").value;
}

//给隐藏域赋值
function addvalue(myvalue){
document.getElementById(myvalue).value-=-1;
}

//计算图片长度
function calimg(){
var a=document.getElementById("answer1").value;
var b=document.getElementById("answer2").value;
var c=document.getElementById("answer3").value;
var allnum=a-(-b)-(-c);
document.getElementById("img1").style.width=(100*a/allnum)+"px";
document.getElementById("img2").style.width=(100*b/allnum)+"px";
document.getElementById("img3").style.width=(100*c/allnum)+"px";
}
function checkboxTest(){
//获取Checkbox中的值，被选中就输出
var checkTmp=document.getElementsByName("check2");
var tmpStr="";
for(var i=0;i<checkTmp.length;i++)
{
if(checkTmp[i].checked)
{
tmpStr+=checkTmp[i].value+"\t";
}
}
alert(tmpStr);

}
</script>
<body>

<div id="show1" style="display:none;background-color:#FF0000">show1</div>
<div id="show2" style="display:;background-color:#0000FF">show2</div>
<input type="button" onclick="opendiv()" value="切换图层显示">
<br><br>

<input type="text" id="writeinfo" value="<b>哈哈</b>">
<div id="write1" style="background-color:#00FF00">会被覆盖掉的部分</div>
<input type="button" onclick="writediv()" value="给层里面写内容">
<br><br>

点击单选框
<input type="radio" name="check1" onclick="addvalue('answer1')"> 帅<input type="hidden" name="answer1" value="12"><br>
<input type="radio" name="check1" onclick="addvalue('answer2')"> 漂亮<input type="text" name="answer2" value="4"><br>
<input type="radio" name="check1" onclick="addvalue('answer3')"> 美丽<input type="text" name="answer3" value="14"><br>
<br><br>

帅 <img src="bk.jpg" width="100px" height="25px" id="img1"><br>
漂亮 <img src="bk.jpg" width="100px" height="25px" id="img2"><br>
美丽 <img src="bk.jpg" width="100px" height="25px" id="img3"><br>
<input type="button" onclick="calimg()" value="计算图片长度">
<br><br>

<div id="checkTest">
<input type="checkbox" name="check2" id="check2" value="0">唱歌</input>
<input type="checkbox" name="check2" id="check2" value="1">爱人</input>
<input type="checkbox" name="check2" id="check2" value="2">看书</input>
<input type="checkbox" name="check2" id="check2" value="3">电影</input>
<input type="checkbox" name="check2" id="check2" value="4">篮球</input>
<input type="button" onclick="checkboxTest()" value="取复选框值">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航