js常见代码题 基础代码题

本文列举了一系列JavaScript基础代码题目,包括输出偶数和、判断闰年、实现倒计时、图片切换等实际应用场景,旨在提升JavaScript编程技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、输出1-100以内所有的偶数的和

方法1:

var sum=0;
for(var i=1;   i<101     ;i++){
	     if(  i%2==0       ){
			   sum=sum+i;
			 }
	  }
 Alert(sum)  2550       //输出结果

方法2:

var sum=0;
  for(var i=0;i<=100;   i++   ){
	    sum=sum+i;
	  }
     Aleat(sum)     //输出结果

2、定义一个函数,任意输入一个年份,判断是否为闰年。

Html:

<input type="text" id="year" />
<input type="button" value="测试"  onclick=”year()/>

Js:

function year(){
	      var years =  document.getElementById(‘year’)        ;//获取年份
		  if( years%4==0&&years%10!=0||years%400==0      ){
			     alert("是闰年");
			  }else{
				 alert("不是闰年");
				  }
	  }

3、输出2000-2016年中所有的闰年

for(var year=2000;year<=2016;year++){
	    if(  year%4==0&&year%10!=0||year%400==0        )
		{
		   	document.write(year);
	    }
	  }

4、商城详情数值加减效果,如下图:

在这里插入图片描述
Html:

<form>
    <input type="button" value="-"  id=”xia”         />
    <input type="text" value="1" id="num" />
    <input type="button" value="+"  id=”shang”         />
  </form>

Js:

function jian(){
	     var num = document.getElementById("num");
		 var numValue = document.getElmentById(‘xia’)       ;//获取当前数值
		 //减1(判断,不能小于1)
		 if(numValue>1){
		 var newValue =numValue-1; 
		 //把新的数值替换原有数
		 num.value=newValue;}
	  }
  function jia(){
	    //获取当前数值
		var num = document.getElementById("num");
		var numValue = document.getElementById(‘shang’)         ;
		//加1
		var newValue =   jiaValue+1      ;
		//把新的数值替换原有数值
		 Num.value       =newValue;
	  }

5、修改id=”test”的标签的背景颜色为红色

document. getElementById(‘test’)      .style.backgroundColor=“#f00”;

6、实现倒计时盘效果(10,9,8,7…0),要求:每隔一秒变换一次,到0的之后终止。

Html:
<div id="number">10</div>
Js:
auto =       (function(){
	    var num = document.getElementById("number");
		 var now =       ;//获取当前数值
		 var next = now-1;
		 num.innerText=next;
		 if(next==0){
			         ;//停止自动切换
			 }  
	  },        );//1秒钟更新一次

7、2秒后自动跳转到百度页面(写出代码)

window.onload = function(){    
setTimeout(function(){  indow.location = 'http://www.baidu.com';  },2000);

8、表格隔行换色效果(写出完整代码)

html
<table id=”tab”>
  。。。。
</table>
Js:
Window.onload=function(){
  Var trs =  document.getElemenstByTagName(‘tr’)         ;
for(var i=0;i<= trs.length         ;i+=2)
           trs[i]  .style.backgroundColor=”#f00”;
}

9、表单验证

Html:
 <form action="#" id="forms"   onclick=”check”     ><!--点击提交按钮-->
        用户名:<input type="text" id="user" />
        密码:<input type="password" id="pwd" />
        <input type="submit" value="提交" id="sub" />
    </form>
Js:
	      //表单验证
		function  check(){
			 var user = ; document.getELementById(‘user’);     //获取user对象
			 var pwd = ;  document.getELementById(‘pwd’);      //获取pwd对象
			 //用户名不能为空
			 if(  user==null||’’     ){
				   alert("用户名不能为空");				   
                   user.focus      ;// user对象自动获得焦点
				   return false;
				 }
			 if(pwd.value==””|| pwd.length         <6){//密码不能为空且长度不得小于6位
				 alert("密码不能为空且长度不得小于6位");	  
				  pwd.focus();
				  return false;
				 } 
 }

9、点击H1,修改其背景颜色为红色

Html:
<h1 id=”test”>标题1</h1>
Js:
Window.onload=function(){
	Var t=document.getElementById(‘test’);
	t.onclick=function(){
	var h1=document.getElemenByName(‘h1’)
	h1.style.background=’red’;
}
}                                    

10、图片切换效果,如下图:

在这里插入图片描述
方法1:

Html:
<div id="imgBox">
  <img src="img/a.jpg" width="300" height="300" id="imgs" />
  <select id="check">
   <option value="a.jpg">a</option>
   <option value="b.jpg">b</option>
   <option value="c.jpg">c</option>
 </select>
 </div>
Js:
var check = document.getElementById("check");
check.   onclick          =function(){
				 var now =  document.getElementByTagName(‘option’)  ;
				 var imgs =   document.getElementById(‘imgs’)       ="img/"+now;
 }

11.计算夫妻工资总和,如果超过一万五,输出各自工资,小康水平;低于五千,输出各自工资,革命尚未成功,同志仍需努力;否则输出夫妻各自工资,一般

 <script>
window.onload=function(){
	var tj=document.getElementById('tj');
	tj.onclick=function(){
		var num1=parseInt(document.getElementById('num1').value);
		var num2=parseInt(document.getElementById('num2').value);
		if(num1+num2>15000)
			alert('1号工资:'+num1+'2号工资:'+num2+'小康水平');
		else if(num1+num2<5000)
			alert('1号工资:'+num1+'2号工资:'+num2+'革命尚未成功,同志仍需努力');
		else
			alert('1号工资:'+num1+'2号工资:'+num2+'一般');
	}
}
</script>
</head>
<body>
工资1<input type="number" id="num1"><br />
工资2<input type="number" id="num2"><br />
<input type="button" id="tj" value="提交">

12、定义一个一位数组,输出所有奇数的和(for in)

window.onload=function fun(){
	var array = [1,2,3,4,5];
	var sum = 0;
	for(i=0;i<array.length;i++){
	if(array[i]%2!=0)
	sum += array[i];
	}
	document.write("总和:"+sum);
}

13、循环输出window对象的属性名称与document对象的属性名称

<script>
window.onload=function(){
	var i=1;
	var j=1;
	document.write('window:');
	document.write('<br>');
	for(var name in window)
	{
		document.write(i+" "+name+"<br>");
		i++;
	}
	document.write('document:');
	document.write('<br>');
	for(var name in document)
	{
		document.write(j+" "+name+"<br>");
		j++;
	}
}
</script>

14、10-30+50-70。。。1010=?(for)

<script>
window.onload=function(){
	var arr=new Array();
	var j=0;
	var sum=0;
	for (i=10;i<1011 ;i+=10 )
	{
		if(i%4!=0){
		
			arr[j]=i;
			j++;
		}
	}
	for (m=0;m<arr.length;m++ )
	{
		if(m%2==0){
			sum+=arr[m];
		}else{
			sum-=arr[m]
		}
	}
	document.write(sum);
}
</script>

15、竹竿320米,每天截取12米,多少天后竹竿长度少于40米(while)

<script>
window.onload=function(){
	var L=320;
	var i=0;
	while(L>40){
		i++;
		L=L-12;}
	alert(i)
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值