1.乘法口诀表
<script type="text/javascript">
document.write("<table border='1'; cellpadding='20' cellspacing='10'>");
for(var x=1; x<=9; x++){
document.write('<tr>');
for(var y=1; y<=x; y++){
document.write('<td>'+x+'*'+y+'='+(x*y)+'</td>' );
}
for(var y=1; y<=9-x; y++){
document.write('<td> </td>' );
}
document.write('</tr>');
}
document.write('</table>')
</script>
2.选项卡方法一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="选项1" id="btn" style='background: yellow;'/>
<input type="button" value="选项2" id="btn" />
<input type="button" value="选项3" id="btn"/>
<div style="display: block;">内容1</div>
<div>内容二</div>
<div>内容三</div>
</body>
<script type="text/javascript">
window.onload=function(){
var inputs=document.querySelectorAll('input');
var divs=document.querySelectorAll('div');
var last=inputs[0];
for(var i=0;i<inputs.length;i++){
inputs[i].index=i;
inputs[i].onclick=function(){
last.style.background='';
divs[last.index].style.display='none';
this.style.background='yellow';
divs[this.index].style.display='block';
last=this;
}
}
}
</script>
</html>
2.选项卡方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="选项1" id="btn" style='background: yellow;'/>
<input type="button" value="选项2" id="btn" />
<input type="button" value="选项3" id="btn"/>
<div style="display: block;">内容1</div>
<div>内容二</div>
<div>内容三</div>
</body>
<script type="text/javascript">
window.onload=function(){
var inputs=document.querySelectorAll('input');
var divs=document.querySelectorAll('div');
for(var i=0; i<inputs.length; i++){
inputs[i].index=i;
inputs[i].onclick=function(){
for(var i=0; i<inputs.length; i++){
inputs[i].style.background='';
divs[i].style.display='none';
}
this.style.background='yellow';
divs[this.index].style.display='block';
}
}
}
</script>
</html>
3.动态图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张"/>
<img src="img/1.jpg" alt="" style="display: block;margin-top: 20px;" id="pic"/>
</body>
<script type="text/javascript">
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var pic=document.getElementById('pic');
var n=1;
next.onclick=function(){
n++;
if(n>5){
n=5;
}
pic.src='img/'+n+'.jpg';
}
prev.onclick=function(){
n--;
if(n<1){
n=1;
}
pic.src='img/'+n+'.jpg';
}
</script>
</html>
4.文本框输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="提交" id="btn"/>
<input type="text" id="text"/>
<div id="box" style="width:200px;height: 200px; border: 1px solid red;"></div>
</body>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('btn');
var text=document.getElementById('text');
var box=document.getElementById('box');
btn.onclick=function(){
var nei=text.value;
var news='<p>'+nei+'</p>'
box.innerHTML=news+box.innerHTML;
}
}
</script>
</html>
5.循环变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var lis=document.getElementsByTagName('li');
console.log(lis);
for(var i=0; i<lis.length; i++){
lis[i].style.height='50px';
lis[i].style.listStyle='none';
if(i%2==0){
lis[i].style.background='blue';
}else{
lis[i].style.background='red';
}
}
</script>
</html>
6.秒转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="number" id="text"/>
<input type="button" id="btn" value="转换"/>
<div id="box"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
box.style.width='173px';
box.style.height='200px';
box.style.background="pink";
box.style.overflow='auto';
window.onload=function(){
var btn=document.getElementById('btn');
var text=document.getElementById('text');
var box=document.getElementById('box');
btn.onclick=function(){
var num=text.value;
if(num>=0){
var h=parseInt(num/3600);
var m=parseInt((num-h*3600)/60);
var s=(num-h*3600)%60;
var time=h+'小时'+m+'分钟'+s+'秒';
console.log(time);
var news='<p style="margin:0;">'+time+'</p>';
box.innerHTML=news+box.innerHTML;
}else{
time='不能输入负数'
news='<p style="margin:0;">'+time+'</p>';
box.innerHTML=news+box.innerHTML;
}
}
}
</script>
</html>
7.全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="checkbox" id="onc"/>全选/全不选
</div>
<ul>
<li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
<li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
<li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
<li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
<li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
</ul>
</body>
<script type="text/javascript">
var inputs2=document.getElementsByClassName('cb');
document.getElementById('onc').onclick=function(){
for(var i=0; i<inputs2.length; i++){
inputs2[i].checked=this.checked;
}
}
</script>
</html>