1、马蜂窝首页轮播图,点击右侧小图切换大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 640px;
width:100%;
transition: all 2s;
position: absolute;
}
#btn{
width:130px;
height:510px;
z-index: 4;
position: fixed;
top:56px;
left:1850px;
}
#div0
{
background:url("images/1.jpg.jpeg") no-repeat center;
/*opacity: 0;*/
}
#div1
{
background:url("images/2.jpg.jpeg")no-repeat center;
opacity: 0;
}
#div2
{
background:url("images/3.jpg.jpeg")no-repeat center;
opacity: 0;
}
#div3
{
background:url("images/4.jpg.jpeg")no-repeat center;
opacity: 0;
}
#div4
{
background:url("images/5.jpg.jpeg")no-repeat center;
opacity: 0;
}
</style>
</head>
<body>
<div id="btn">
<button id="bn0"><img src="images/1-1.jpg.jpeg" alt=""> </button>
<button id="bn1"> <img src="images/2-2.jpg.jpeg" alt=""></button>
<button id="bn2"> <img src="images/3-3.jpg.jpeg" alt=""></button>
<button id="bn3"> <img src="images/4-4.jpg.jpeg" alt=""></button>
<button id="bn4"> <img src="images/5-5.jpg.jpeg" alt=""></button>
</div>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
var bn0=document.getElementById("bn0");
var bn1=document.getElementById("bn1");
var bn2=document.getElementById("bn2");
var bn3=document.getElementById("bn3");
var bn4=document.getElementById("bn4");
var div0=document.getElementById("div0");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
var pre;
bn0.onclick=function () {
setPage(bn0);
};
bn1.onclick=function () {
setPage(bn1);
};
bn2.onclick=function () {
setPage(bn2);
};
bn3.onclick=function () {
setPage(bn3);
};
bn4.onclick=function () {
setPage(bn4);
};
function setPage(bn) {
if (pre) {
pre.style.opacity = 0;
}
switch (bn) {
case bn0:
div0.style.opacity = 1;
pre = div0;
break;
case bn1:
div1.style.opacity = 1;
pre = div1;
break;
case bn2:
div2.style.opacity = 1;
pre = div2;
break;
case bn3:
div3.style.opacity = 1;
pre = div3;
break;
case bn4:
div4.style.opacity = 1;
pre = div4;
break;
}
}
</script>
</body>
2、使用双重循环写乘法口诀表
<script>
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + "*" + i + "=" +(j * i)+" ");
}
document.write("<br>");
}
</script>
3、使用循环完成水仙花数100-999 370=333+777+000;
<script>
for(var i1=100;i1<=999;i1++){
var a, b,c;
a=parseInt(i1/100);
b=parseInt(i1%100/10);
c=i1%10;
if(a*a*a+b*b*b+c*c*c==i1) {
console.log(i1)
}
}
</script>
4、使用双重循环完成表格制作, document.body.innerHTML="
(通过弹窗输入的两次数值,定为行数和列数)
<style>
table
{
border-collapse: collapse;
}
td
{
border:1px solid #000000;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<script>
var row=Number(prompt("请输入行数"));
var col=Number(prompt("请输入列数"));
if(!isNaN(row) && !isNaN(col)){
var str="<table>";
for(var j=0;j<row;j++){
str+="<tr>";
for(var i=0;i<col;i++){
str+="<td></td>";
}
str+="</tr>";
}
str+="</table>";
}
document.write(str);
</script>
5.入职薪水10K,每年涨幅5%,50年后工资多少?
<script>
var i=0;
var sum=10000;
while (i<=50){
sum+=0.05*sum;
i++;
}
console.log(sum);
</script>
6、打印100以内 7的倍数
<script>
for(var i=7;i<=100;i++){
if(0==i%7 ){
console.log(i);
}
}
</script>
7、打印100以内的奇数
<script>
for(var i=0;i<=100;i++){
if(i%2!==0){
console.log(i);
}
}
</script>
8、求出1-1/2+1/3-1/4……1/100的和
<script>
var sum=0;
var i=1;
for (i = 1; i < 101; ++i) {
if (i % 2 === 0) {
sum -= 1 / i;
}
else
{
sum += 1 / i;
}
}
console.log(sum);
</script>
9、打印出1000-2000年中所有的闰年,并以每行四个数的形式输出
<script>
var a=0;
for(i=1000;i<=2000;i++) {
if ((i % 400 === 0) || ((i % 4 === 0) && (i % 100) !== 0)) {
document.write(i+" ")
a++;
if(a%4===0){
document.write("<br>");
}
}
}
</script>