HTMLDOM文档对象，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
Document对象的常用方法：
getElementById：返回对拥有指定id的第一个对象的引用
getElementsByName：返回带有指定名称的对象的集合
getElementsByTagName：返回带有指定标签名的对象的集合
write()：向文档写文本、HTML表达式或者js代码
如果是双标签中的文本，则使用innerHTML来赋值：
document.getElementById("nameinput").innerHTML="值"://注意：innerHTML表示可以添加js、css、文本、标签等
document.getElementById("nameinput").innerText="值"://注意：innerText表示只可以添加纯文本
如果是输入框中的文本，则使用value来赋值：document.getElementById("nameinput").value="值";
访问相同的标签元素或者name属性或者class样式方法都差不多
var ainput = document.getElementByTagName('input');
var strs = "";
for(var i = 0; i<ainput.length; i++){
strs += ainput[i].value+"<br/>";
}
document.getElementById('boxdiv').innerHTML=strs; //将值赋值给id为boxdiv中。
复选框的属性：checked，选中值为true，未选中为false。
JavaScript内置对象：
Math对象的常用方法
cell()：对上进行舍入；Math.cell(26.2)返回27
floor()：对下进行舍入；Math.floor(25.5)返回25
round()：把数四舍五入为最接近的数，Math.round(25.5)返回26
Date对象
var 日期对象=new Date(参数);
常用方法：
getDate() 返回一月中的某一天，值在1~31之间。
getDay返回一个星期中的某一天，值在0~6之间
getHours返回小时数，值在0~23之间
getMinutes返回分钟数，值在0~59之间
getSeconds返回秒数，值在0~59之间
getMonth返回月份，值在0~11之间
getFullYear返回年份，值为四位数
getTime返回1970年1月1日以来的毫秒数
定时函数：
setTimeout();//只执行一次 var timeout=setTimeout("调用的函数，注意需要写上括号",等待的毫秒数);//如果需要多次调用，则使用setTimeout调用自身函数即可。
setInterval();//循环执行 var interval = setInterval("调用的函数，注意需要写上函数名与括号不能省略掉",间隔的毫秒数);
清除函数：
clearTimeout(定时函数对象名);//clearTimeout(timer1)
clearInterval(定时函数对象名);//clearInterval(timer2);
制作时钟特效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body οnlοad="timeshow()"> 8 <h1 style="background-color: red;border-radius: 50%;text-align: center">当前时间</h1> 9 <div></div> 10 11 </body> 12 13 <script> 14 timeshow(); 15 // var t = window.setInterval("timeshow()",1000); 16 function timeshow() { 17 var d=new Date(); 18 var y = d.getFullYear(); 19 var m = d.getMonth()+1; 20 var ri = d.getDate(); 21 // ri = c(ri); 22 var shi = d.getHours(); 23 var fen = d.getMinutes(); 24 fen = c(fen); 25 var miao = d.getSeconds(); 26 miao = c(miao); 27 var xinqi = d.getDay()+1; 28 xinqi=xin(xinqi); 29 var box = document.getElementsByTagName("div")[0]; 30 box.innerHTML="<h2 style='background-color: green;border-radius: 50%;color: white;text-align: center'>"+y+"年"+m+"月"+ri+"日 "+shi+"时"+fen+"分"+miao+"秒 星期"+xinqi+"</h2>"; 31 //使用setTimeOut，来控制 32 setTimeout("timeshow()",1000); 33 34 } 35 function c(w) {//补齐位数 36 if (w<10){ 37 w ="0"+w; 38 return w; 39 }else{ 40 return w; 41 } 42 } 43 function xin(xinqi) {//星期转换 44 switch (xinqi){ 45 case 1:xinqi= "一";break; 46 case 2:xinqi = "二";break; 47 case 3:xinqi = "三";break; 48 case 4:xinqi = "四";break; 49 case 5:xinqi = "五";break; 50 case 6:xinqi = "六";break; 51 case 7:xinqi = "日";break; 52 } 53 return xinqi; 54 } 55 </script> 56 57 </html>
图片轮播
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ padding: 0; margin: 0;} 8 div{ 9 width: 520px; 10 height: 280px; 11 border:1px solid gold; 12 margin:100px auto; 13 overflow: hidden; 14 position:relative; 15 } 16 li{ 17 list-style:none; 18 } 19 ul:first-child{ 20 width: 9999px; 21 overflow: hidden; 22 position:absolute; 23 transition:all 0.5s;//过渡效果0.5s 24 } 25 ul:first-child li{ 26 float:left; 27 width: 520px; 28 height: 280px; 29 } 30 ul:last-child{ 31 width: 80px; 32 height: 15px; 33 background-color:rgba(0,0,0,.5); 34 border-radius:10px; 35 position: absolute; 36 bottom:10px; 37 left:50%; 38 margin-left:-50px; 39 } 40 ul:last-child li:first-child{ 41 margin-left:4px; 42 } 43 ul:last-child li{ 44 cursor:pointer; 45 float:left; 46 width: 15px; 47 height: 15px; 48 margin-right:4px; 49 background-color: #ccc; 50 border-radius: 50%; 51 } 52 ul:last-child li.star{ 53 background-color: gold; 54 } 55 </style> 56 </head> 57 <body> 58 <div> 59 <ul id="banner"> 60 <li><img src="../img/1.jpg" alt=""></li> 61 <li><img src="../img/2.jpg" alt=""></li> 62 <li><img src="../img/3.jpg" alt=""></li> 63 <li><img src="../img/4.jpg" alt=""></li> 64 </ul> 65 <ul id="controls"> 66 <li class="star"></li> 67 <li></li> 68 <li></li> 69 <li></li> 70 </ul> 71 </div> 72 <script> 73 var g=function(node){ 74 if(node.substr(0,1)=="#"){ 75 return document.getElementById(node.substr(1)); 76 } 77 } 78 var banner=g("#banner"); 79 var controls=g("#controls"); 80 var controlsLis=controls.getElementsByTagName("li"); 81 var timer=null;//设置定时器 82 var num=0; 83 for(var i=0;i<controlsLis.length;i++){ 84 controlsLis[i].index=i; 85 controlsLis[i].οnclick=function(){ 86 clearInterval(timer); 87 for(var j=0;j<controlsLis.length;j++){ 88 controlsLis[j].className=''//把所有的控制按钮颜色都去掉 89 } 90 this.className='star';//当前点击的按钮变色 91 banner.style.left=-520*this.index+"px"; 92 num=this.index; 93 autoPlay(); 94 } 95 } 96 function autoPlay(){ 97 timer=setInterval(function(){ 98 if(num>3){ 99 num=0; 100 } 101 for(var j=0;j<controlsLis.length;j++){ 102 controlsLis[j].className=''//把所有的控制按钮颜色都去掉 103 } 104 controlsLis[num].className='star'; 105 banner.style.left=-520*num+"px"; 106 num++; 107 },1000) 108 } 109 autoPlay(); 110 </script> 111 </body> 112 </html>
使用js表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
span {
color: red;
}
form {
width: 800px;
border: 1px red solid;
margin: 0px auto;
}
</style>
</head>
<body>
<form action="success.html" method="post">
<table>
<tr>
<td><span>*</span>用户名：</td>
<td>
<input id="uname" type="text" value="">
</td>
<td><span id="suname"></span></td>
</tr>
<tr>
<td><span>*</span>密码：</td>
<td>
<input id="upwd" type="password" value="">
</td>
<td><span id="supwd"></span></td>
</tr>
<tr>
<td><span>*</span>确认密码：</td>
<td>
<input id="upwd2" type="password" value="">
</td>
<td><span id="againpwd"></span></td>
</tr>
<tr>
<td><span>*</span>年龄：</td>
<td>
<input id="uage" type="number" value="">
</td>
<td><span id="suage"></span></td>
</tr>
<tr>
<td><span>*</span>手机号：</td>
<td>
<input id="uphone" type="text" value="">
</td>
<td><span id="suphone"></span></td>
</tr>
<tr>
<td><span>*</span>邮箱：</td>
<td>
<input id="uemail" type="email" value="">
</td>
<td><span id="suemail"></span></td>
</tr>
<tr>
<td><span>*</span>性别：</td>
<td>
<input type="radio" id="lable1" name="sex" value=""><label for="lable1">男</label>
<input type="radio" id="lable2" name="sex" value=""><label for="lable2">女</label>
</td>
<td><span id="ssex"></span></td>
</tr>
<tr>
<td><span>*</span>爱好：</td>
<td><input type="radio" name="choose" id="all" οnclick="allfun()"><label for="all">全选</label>
<input type="radio" name="choose" id="noall" οnclick="noallfun()"><label for="noall">全不选</label>
<input type="radio" name="choose" id="fanall" οnclick="fanallfun()"><label for="fanall">反选</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="like1" name="like" value=""><label for="like1">游戏</label>
<input type="checkbox" id="like2" name="like" value=""><label for="like2">听歌</label>
<input type="checkbox" id="like3" name="like" value=""><label for="like3">跑步</label>
</td>
<td><span id="slike"></span></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="登录" οnclick="denlu()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
<script src="../js/login.js">
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
