第二批代码JavaScript

ohhiya

已于 2024-01-30 15:04:02 修改

阅读量381

点赞数 8

分类专栏： 4A 文章标签： javascript 前端开发语言

于 2024-01-30 15:03:44 首次发布

本文链接：https://blog.csdn.net/2202_75526478/article/details/135933182

版权

4A 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

要求使用Date对象在页面上输出“今天是XXXX年XX月XX日星期X”

计算已经度过的时光：使用Date对象输入出生日期后，在页面上显示“你经过了XXXX天的时光…………。”

我们在网上购物时，经常会看到商家推出一些抢购活动，网页上会显示活动开始时间的倒计时，如“距离活动开始还有39天19时02分11秒”，其中，“39天19时02分11秒”是一个时间差。（P91-92）

math对象

dom

根据。。获取元素

<body>
    <ul>
        <li id="week">Monday </li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thusday</li>
        <li>Friday</li>
    </ul>

    <script>     // 根据id标签获取元素
        var Obox = document.getElementById('week');
        console.log(Obox);
    </script>

    <script>     // 根据标签名获取元素
        var lis = document.getElementsByTagName('li');
        console.log(lis);
                // 添加代码后 
        for (var i = 0; i < lis.length; i++){
            console.log(lis[i]);
        }
                // 验证是否为数组
        console.log(Array.isArray(lis));
    </script>

    <p>Which animal do you like</p>
    <input type="checkbox"name="animal" value="lion">lion
    <input type="checkbox"name="animal" value="crab">crab
    <input type="checkbox"name="animal" value="hippo">hippo
    <input type="checkbox"name="animal" value="giraffe">giraffe

    <script>     //根据name属性获取元素
        var animals = document.getElementsByName('animal');
                // 输出获取到的集合
        console.log(animals);
                // 通过索引访问集合中的第2个元素并输出
        console.log(animals[1]);
    </script>

    <ul>
        <li class="food">egg</li>
        <li class="toy">doll</li>
        <li class="drink">tea</li>
        <li class="color">red</li>
    </ul>

    <script>     //根据类名获取元素
                // 根据类名food获取元素
        var food = document.getElementsByClassName('food');
                // 根据类名toy获取元素
        var toy = document.getElementsByClassName('toy');
                // 输出类名为food的第1个元素
        console.log(food[0]);
                // 输出类名为toy的第1个元素
        console.log(toy[0]);
    </script>

    <div class="month">January</div>
    <div class="month">February</div>
    <div class="month">March</div>
    <div class="month">April</div>

    <script>     //根据css获取元素
                //获取类名为month的第1个div 
        var firstPro = document.querySelector('.month');
        console.log(firstPro); 
                // 获取类名为month的所有div
        var allPro = document.querySelectorAll('.month');
        console.log(allPro);
    </script>

    <script>     //获取基本结构元素
                // 获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
                // 获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

    <script>ss
                // 获取或设置当前文档的标题
        console.log(document.title);
        console.log(typeof document.title);
    </script> 
 </body>

事件注册

<body>
    <button>它是谁</button>
    <button>它又是谁</button>
    <script>
            //传统方式
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            alert('熊大');
        }
            //方法监听注册事件
        btns[1].addEventListener('click', function () {
            alert('熊二');
        })
    </script>
</body>

显示文档所有标签

 <body>
        <div>
            <a href="https://www.ryjiaoyu.com/">人邮教育</a>
            <a href="https://www.ptpress.com.cn/p/z/1625016162875.html">人民邮电出版社</a>
            </br>
            <p align="center">这一段代码是为测试DOM集合对象的用法而设置的</p>
            <hr>
            <h3>本文档使用了以下HTML标签：</h3>
            <p>HTML,HEAD,META,TITLE,BODY,P,A,A,DIV,P,HR,H3,SCRIPT</p>
        </div>
        <script></script>
    </body>

用三种元素获取内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>大数据之王</title>
    </head>
    <style>
.      .nav{
          background-color: antiquewhite;
          width: 500px;
          height: 30px
          margin: 20px auto;

        }
          
        
        .item{
            width: 125px;
            float: left;
            line-height: 30px;
            text-align: center;
        }
        #hide{
            visibility: hidden;
        }
    </style>
    <body> textContent
        <div class="nav">
            <div class="item">首页</div>
            <div class="item">个人主页</div>
            <div class="item">设置</div>
            <div class="item" id="hide">隐藏内容</div>
        </div>
        <script>
            var hideText=document.getElementById('hide');
            // 通过textContent属性返回获取到的元素的内容
            console.log(hideText.textContent);
            // 通过innerText属性返回获取到的元素的内容
            console.log(hideText.innerText);
            // 通过textContent属性设置获取到的元素的内容
            hideText.textContent='特定时刻显示';
            // 通过textContent属性返回元素修改过的内容
            console.log(hideText.textContent);
        </script>
    <!-- <body> innerHTML
        <table border="1" cellspacing="0 align="center">
            <caption>商品信息详情</caption>
            <tr>
                <th>商品种类</th>
                <td>过季旧款</td>
                <td>当前热销</td>
                <td>秋季新品</td>
            </tr>
            <tr>
                <th>商品状况</th>
                <td id="down">已下架</td>
                <td class="up"><span>热卖中</span></td>
                <td class="up">等待上架</td>
            </tr>
        </table>
        <script>
            // 通过id获取元素
            var downGoods=document.getElementById('down');
            // 通过innerHTML属性获取元素内容
            console.log(downGoods.innerHTML);
            // 通过类名获取元素
            var upGoods=document.getElementsByClassName('up');
            // 通过innerHTML属性获取元素内容
            console.log(upGoods[0].innerHTML);
            // 通过赋值语句设置元素内容
            upGoods[1].innerHTML='已上架';
        </script>
    </body> -->
    <!-- <body> innerText
        <ol>
            <li id="first">张三</li>
            <li id="second"><span>李四</span></li>
            <li id="third">王五</li>
            <li>小明</li>
            <li>小红</li>
        </ol>
        <script>
            var firstOne=document.getElementById('first');
            // 通过innerText属性获取元素内容
            console.log(firstOne.innerText);
            var secondOne=document.getElementById('second');
            // 通过innerText属性获取元素内容
            console.log(secondOne.innerText);
            var thirdOne=document.getElementById('third')
            // 通过innerText属性设置元素内容
            thirdOne.innerText='小兰';
        </script>
    </body> -->
    </body>
</html>

时间

<body>
		<span id="time"></span>
		<script>
			function show() {
				var date = new Date();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				var element = document.getElementById("time");
				element.innerHTML =  "现在是北京时间"+hour+"："+minute+"："+second;          
			}
			show();
			setInterval("show()",1000);
		</script>
	</body>

for循环

1-100之间所有能被3整除的数字的和

<body>
    <script>
        var result = 0;
        for(var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result += i;
            }
        }
        console.log(result);
    </script>
</body>

1-100之间所有偶数奇数的和

<body>
    <script>
        var i
        var sum1=0
        var sum2=0
        for(i=1;i<=100;i++){
            if (i%2==0){
                sum1=sum1+i;
            }else{
                sum2=sum2+i;
            }
        }
        console.log('偶数和是'+sum1)
        console.log('奇数和是'+sum2)
    </script>
</body>

1-100之间所有数的平均值

<body>
    <script>
        var sum = 0;
        var average = 0;
        for (var i = 1;i <= 100; i++){
            sum = sum + i;
        }
        average = sum/100;
        console.log(average);
    </script>
</body>

1-100之间所有整数累加和

 <body>
        <script>
            var sum = 0;
            for(var i = 1; i <=100; i++){
                sum +=i;
            }
            console.log(sum);
        </script>
    </body>

求学生成绩

<body>
    <script>
      var num = prompt("请输入班级的总人数："); 
      var sum = 0; 
      var average = 0; 
      for (var i = 1; i <= num; i++) {
        var score = prompt("请输入第" + i + "个学生的成绩");
        sum = sum + parseFloat(score);
      }
      average = sum / num;
      alert("班级的总成绩为：" + sum);
      alert("班级的平均分为：" + average);
    </script>
  </head>
 </body>

星星

<BODY>
        <script>
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = i; j <= 10; j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);
        </script>
    </BODY>

js对象

date对象

要求使用Date对象在页面上输出“今天是XXXX年XX月XX日星期X”

 <body>
        <script>  
            var date = new Date();
            date.setFullYear(2023);
            date.setMonth(10);
            date.setDate(29);

            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDate();
            var weeks = new Array("星期日")
            // ("星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
	        // var w= weeks[today.getDay()]

            console.log('今天是'+ year +'年' + month +'月'+ day +'日'+weeks);

        </script>
    </body>

计算已经度过的时光：使用Date对象输入出生日期后，在页面上显示“你经过了XXXX天的时光…………。”

<body>
    <script>
        var n1=new Date("2001/01/01");
        var n2=new Date("2023/10/29");
        var n=n2.getTime()-n1.getTime();
        n=n/1000/60/60/24;
        document.write("你已度过了"+n+"天");
            </script>
   </body>

我们在网上购物时，经常会看到商家推出一些抢购活动，网页上会显示活动开始时间的倒计时，如“距离活动开始还有39天19时02分11秒”，其中，“39天19时02分11秒”是一个时间差。（P91-92）

 <body>
        <script>
// 3.我们在网上购物时，经常会看到商家推出一些抢购活动，
// 网页上会显示活动开始时间的倒计时，如“距离活动开始还有39天19时02分11秒”，
// 其中，“39天19时02分11秒”是一个时间差。（P91-92）
            function countDown(time){
                var nowTime = new Date();
                var overTime = new Date(time);
                var times = (overTime - nowTime) / 1000;
                var d = parseInt(times / 60 / 60 / 24 );
                d = d < 10 ? '0' + d : d;
                var h = parseInt(times / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                var s =parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                return d + '天' + h + '时' + m + '分' + s + '秒';
            }
            console.log('距离活动开始还有' + countDown('2023-11-11 00:00:00'));
        </script>
    </body>

math对象

1

  <body>
    <script>
// 1.任务描述：假定我们抽取到某个数字代表获奖情况，
// 抽到每一个数的概率是一样的，假定抽到1代表1等奖，2和3代表2等奖，4－7代到3等奖。
            var arr=[1,2,3,4,5,6,7,8,9,10]
			var a = Math.floor(Math.random()*(arr.length));
			console.log(arr[a])//1,2,3
			if (arr[a] == 1){
				alert("恭喜获得一等奖")
			}
			if (arr[a] == 2 || arr[a] == 3){
				alert("恭喜获得二等奖")
			}
			if (arr[a] >= 4 && arr[a] <= 7){
				alert("恭喜获得三等奖")
			}if (arr[a] >= 8){
                alert("谢谢惠顾")
            }

    </script>
    </body>

2

 <body>
        <script>
            function getRand(min,max){
                return Math.floor(Math.random()*(max-min+1)+min);
            }
            var random=getRand(1,10);
             while(true){
                var num=prompt("请输入一个1~10的整数:");
                if(num === null){
                    break;
                }else if(num > random){
                    alert("你猜大了");
                 }else if(num < random){
                    alert("你猜小了");
                }else{
                    alert("恭喜你，你猜中了");
        }
    }
        </script>
    </body>