今天的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/pro3.css" />
<script type="text/javascript">
//换肤
function hf1(){
var hf=document.getElementById("hf");
hf.style.background="yellow";
}
function hf2(){
var hf=document.getElementById("hf");
hf.style.background="red";
}
//全选
window.onload = function(){
var xx=document.getElementsByName("items");
var quanxuan=document.getElementById("All");
var quanbuxuan=document.getElementById("No");
var fanxuan=document.getElementById("Rev");
var tijiao=document.getElementById("sendBtn");
var qxbx=document.getElementById("checkedAllBox");
for(var i=0;i<xx.length;i++){
xx[i].onclick=function (ev) {
wf();
};
}
function wf () {
var flag=true;
for(var j=0;j<xx.length;j++){
if(!xx[j].checked){
flag=false;
break;
}
}
qxbx.checked=flag;
}
qxbx.onclick=function (ev) {//全选/全不选
for(var i=0;i<xx.length;i++) {
if (qxbx.checked) {
xx[i].checked = "true"
} else {
xx[i].checked = ""
}
}
};
quanxuan.onclick=function(){//全选
for(var i=0;i<xx.length;i++){
xx[i].checked="true"
}
wf();
};
quanbuxuan.onclick=function(){//全不选
for(var i=0;i<xx.length;i++){
xx[i].checked=""
}
wf();
};
fanxuan.onclick=function(){//反选
for(var i=0;i<xx.length;i++){
xx[i].checked=!xx[i].checked;
}
wf();
};
tijiao.onclick=function (ev) {
for(var i=0;i<xx.length;i++){
if(xx[i].checked)
alert(xx[i].value)
}
}
//8个dom节点的查找
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var btn03=document.getElementById("btn03");
var btn04=document.getElementById("btn04");
var btn05=document.getElementById("btn05");
var btn06=document.getElementById("btn06");
var btn07=document.getElementById("btn07");
var btn08=document.getElementById("btn08");
var btn09=document.getElementById("btn09");
var btn10=document.getElementById("btn10");
btn01.onclick=function(){
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
btn02.onclick=function(){
var list1=document.getElementsByTagName("li");
for(var i=0;i<list1.length;i++){
alert(list1[i].innerHTML);
}
}
btn03.onclick=function(){
var gender=document.getElementsByName("gender");
for(var i=0;i<gender.length;i++){
alert(gender[i].value);
}
}
btn04.onclick=function(){
var city=document.getElementById("city");
var list2=city.getElementsByTagName("li");
for(var i=0;i<list2.length;i++){
alert(list2[i].innerHTML);
}
}
btn05.onclick=function(){
var city=document.getElementById("city");
for(var i=0;i<city.children.length;i++){
alert(city.children[i].innerHTML);
}
}
btn06.onclick=function(){
var phone=document.getElementById("phone");
alert(phone.firstChild.innerHTML);
}
btn07.onclick=function(){
var bj=document.getElementById("bj");
alert(bj.parentNode.innerText);
}
btn08.onclick=function(){
var az=document.getElementById("android");
alert(az.previousElementSibling.innerHTML);
}
btn09.onclick=function(){
var name=document.getElementById("username");
alert(name.value);
}
btn10.onclick=function(){
var name=document.getElementById("username");
name.value="吃饭了."
}
btn11.onclick=function(){
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
//鼠标移动显示文字(直接写在了html中)
}
//图片变大变色
function bd(){
document.getElementById("bd").style.width="200px";
document.getElementById("bd").style.height="200px";
document.getElementById("bd").style.background="blue";
}
function hy(){
document.getElementById("bd").style.width="100px";
document.getElementById("bd").style.height="100px";
document.getElementById("bd").style.background="red";
}
//乘法表
function cf(){
var a=document.getElementById("xf");
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
a.innerHTML+=i+"*"+j+"="+i*j+" ";
}
a.innerHTML+="\n"
}
}
//下拉列表输入法
function xs(){
document.getElementById("xlk").style.display="block";
document.getElementById("b").innerHTML="↑输入法";
document.getElementById("b").href="javascript:yc()";
};
function yc(){
document.getElementById("xlk").style.display="none";
document.getElementById("b").innerHTML="↓输入法";
document.getElementById("b").href="javascript:xs()";
}
</script>
</head>
<body>
<div id="hf">
<form id="message">
<h2>换肤</h2>
<dl>
<dt>
<input id="btn1" type="button" value="黄皮肤"
onclick="hf1()"/>
<input id="btn2" type="button" value="红皮肤"
onclick="hf2()"
/>
</dt>
</dl>
<dd>输入账号:<input type="text"></dd>
<dd>输入密码:<input type="password"></dd>
<dd>请输留言:<textarea></textarea></dd>
<dd><input type="submit" value="提交"></dd>
</form>
</div>
<div id="qx">
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="All" value="全 选" />
<input type="button" id="No" value="全不选" />
<input type="button" id="Rev" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</div>
<div id="yd">
<label
onmouseout="document.getElementById('div1').style.display='none'"
onmousemove="document.getElementById('div1').style.display='block'" />
<input type="checkbox" />自动登录
</label>
<div id="div1"">不要在网吧</div>
</div>
<div id="kzbd">
<div id="bd" onmouseover="bd()"
onmouseout="hy()"
>
</div>
</div>
<div id="cfb">
<input type="button" value="乘法表" onclick="cf()" />
<textarea id="xf" rows="10" cols="100"></textarea>
</div>
<div id="jd">
<div id="leftt">
<div id="cs">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
<div id="dj">
<p>
你喜欢哪款单机游戏?
</p>
<ul id="city">
<li id="bj">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
</div>
<div>
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li id="bj">IOS</li><li id="android">Android</li><li>Windows Phone</li>
</ul>
</div>
</div>
<div id="right">
<div><input type="button" id="btn01" value="查找#bj节点" /></div>
<div><input type="button" id="btn02" value="查找所有li节点" /></div>
<div><input type="button" id="btn03" value="查找name=gender的所有节点" /></div>
<div><input type="button" id="btn04" value="查找#city下所有li节点" /></div>
<div><input type="button" id="btn05" value="返回city的所有子节点" /></div>
<div><input type="button" id="btn06" value="返回#phone的第一个子节点" /></div>
<div><input type="button" id="btn07" value="返回#bj的父节点" /></div>
<div><input type="button" id="btn08" value="返回#android的前一个兄弟节点" /></div>
<div><input type="button" id="btn09" value="返回#username的value属性值" /></div>
<div><input type="button" id="btn10" value="设置#username的value属性值" /></div>
<div><input type="button" id="btn11" value="返回#bj的文本值" /></div>
</div>
<div id="leftb">
<p>
gender:
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
</p>
<p id="nm">name: <input type="text" id="username"/></p>
</div>
</div>
<div id="srf">
<a href="javascript:yc()" id="b">↑输入法</a>
<div id="xlk">
<option>谷歌输入法</option>
<option>qq拼音输入法</option>
<option>五笔输入法</option>
<option>智能abc</option>
<option>搜狗输入法</option>
</div>
</div>
</body>
</html>
更多推荐
第四周学习web第二天
发布评论