黑马程序员技术交流社区

标题: 【西安校区】js常见代码题 基础代码题 [打印本页]

---

作者: 逆风TO    时间: 2019-12-31 18:12
标题: 【西安校区】js常见代码题 基础代码题
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>
1
2
3
4
5
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  .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%2!=0)
        sum += array;
        }
        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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2