js慕课网部分编程练习-CSDN博客

本文链接：https://blog.csdn.net/xiaohuihui821/article/details/78469045

1.小伙伴们，实现在html页面中的插入JavaScript脚本，打开页面时，在页面中显示一句话 : "系好安全带,准备启航--目标JS"，并弹出一个提示框："准备好了，起航吧！"

way1:

<html>
 <head>
  <title> new document </title>  
  <script type="text/javascript"> 
  document.write("系好安全带,准备启航--目标JS");
  alert("准备好了，起航吧！");
  </script> 
 </head> 
 <body> 
 </body>
</html>

way2:

<html>
 <head>
  <title> new document </title>  
  <script src="script.js"></script> 
 </head> 
 <body> 
 </body>
</html>

script.js

  document.write("系好安全带,准备启航--目标JS");
  alert("准备好了，起航吧！");

<head>
<title>JS基础</title>
<script type="text/javascript">
  var a,b,sum;
  var  a  = 5;
  var  b  = 100%7;  
  alert(a);
  sum = a > b && a*b > 0 ;
  document.write( "我认为 a 的值是:5  b的值是: 2 sum 的值是:1 <br/>");
  document.write( "答案是,第一轮计算后，a 为："+ a +";b为："+b +";第一次计算sum为："+ sum +"<br/>");


  sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;  
  document.write( "再一次计算后，我认为 a 的值是: 6  b的值是:  1 sum 的值是:  27<br/>"); 
  document.write( "答案是，第二轮计算后，a 为：" + a + ";b为：" + b +";第二次计算sum为："+ sum +",sum的类型也发生变化了。");
</script>
</head>
<body>
</body>
</html>

3.数组

<head>
<title>表达式</title>
<script type="text/JavaScript">
 var myarr = new Array();
 myarr[0]=20;
 myarr[1]='a';//myarr[1]=a; 
 document.write("数组的第一个值："+myarr[0]);
  document.write("数组的第二个值："+myarr[1]);
</script>
</head>
<body>
</body>
</html>

编程练习

某班的成绩出来了，现在老师要把班级的成绩打印出来。

效果图:

XXXX年XX月X日 星期X--班级总分为:81

格式要求：

1、显示打印的日期。格式为类似“XXXX年XX月XX日星期X” 的当前的时间。

2、计算出该班级的平均分（保留整数）。

同学成绩数据如下：

"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

  //通过javascript的日期对象来得到当前的日期，并输出。
  var date = new Date();
  var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  //document.write(week[5]);
  document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[date.getDay()]+"<br>");
  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
  var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
  var scoreArr = scoreStr.split(";");
  var sum = 0;
  for (i=0;i<scoreArr.length;i++){
   // document.write(scoreArr[i].indexOf(":")+"<br>");
   // document.write(scoreArr[i].length+"<br>");
    sum = sum + parseInt(scoreArr[i].substr(scoreArr[i].indexOf(":")+1,scoreArr[i].length));
	//document.write(sum+"<br>");
  }

  //从数组中将成绩撮出来，然后求和取整，并输出。
  var avg = sum/scoreArr.length;
  document.write(avg);
</script>
</head>
<body>
</body>
</html>

5.实现“全选”、“全不选”、以及在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
    </head>
    
    <body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
       function checkall(){
            var hobby = document.getElementsByName("hobby");
			//alert(hobby);
            for(i=0;i<hobby.length;i++){
			    hobby[i].checked =true;
			}
          // 任务1 
           
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            //alert(hobby.length);
           for(i=0;i<hobby.length;i++){
			    hobby[i].checked =false;
		   }
         // 任务2    
            
        }
        
        function checkone(){
            clearall();
            var hobby = document.getElementsByName("hobby");
            var j=document.getElementById("wb").value;
			//alert(j);
            for(var i=0;i<j.length;i++){
                if(j.charAt(i)>6 || j.charAt(i)<1){
                    alert("越界,请重新输入！");
                    document.getElementById("wb").value="";
                }
            }
                for(var n=0;n<j.length;n++){
                   
                        hobby[(j.charAt(n))-1].checked=true; 
                }

            
            
        }
        
        </script>
        </script>
    </body>
</html>