测试有效的js作业之Date

最新推荐文章于 2022-11-21 15:35:53 发布
最新推荐文章于 2022-11-21 15:35:53 发布
阅读量134 收藏
点赞数
分类专栏： js作业 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k2460761639/article/details/107576585
版权
本文介绍了JavaScript中日期的处理，包括日期格式化、计算两个日期相差的天数、获取未来的日期、实现倒计时功能以及创建数码时钟。附带相关代码示例和图片资源。
摘要由CSDN通过智能技术生成
  1. 日期格式化
 <script>
        /* 	 思路:
		日期格式化：
		1.定义一个日期函数：var d = new Date(); 
		2.声明日期函数并定义年月日
		function format(date){
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				
				var d = date.getDate(); 
				3.判定日月的条件
					if(m<10){
					m = '0'+m;
				}
				if(d<10){
					d = '0'+d;
				}
				4.给与返回值
				return y+'|'+m+'|'+d
				5.打印结果
					console.log(format(d))*/
			
			var d = new Date();
			console.log(d);
			
			//2018|12|20
			//第一周 var iF for  function
			function format(date){
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				
				var d = date.getDate();
				if(m<10){
					m = '0'+m;
				}
				if(d<10){
					d = '0'+d;
				}
				
				return y+'|'+m+'|'+d
			}
			
			console.log(format(d))
		
    </script>
  1. 判断两个日期相差的天数
  <script>
/* 思路：
1.定义定义二个日期函数：var d = new Date(); 
		2.声明日期函数并在内部相减，
        3.给与返回值并记死返回值
        4.打印结果*/
        var d1 = new Date();
        var d2 = new Date(1545069606139);

        function getDay(d1, d2) {

            console.log(d1)
            console.log(d2)

            var c = d1 - d2;
            return parseInt((c / 1000 / 60 / 60 / 24))
        }

        console.log(getDay(d1, d2));
    </script>

3.获得N天以后的日期

 <script>
        /* 思路： 
        1.赋值一个以后的函数
        var res = getDateAfter(10)
        2.声明里先创建一个时间，
        3.获取当前时间
        now.setDate(now.getDate()+n)
        4.给与返回值now
        5.打印赋值变量*/
        var res = getDateAfter(10)
			function getDateAfter(n){
				var now = new Date();
				now.setDate(now.getDate()+n)
				return now
			}
			console.log(res)
    </script>

4.倒计时

<style>
        .secKill {
          width:190px;
          height:260px;
          background-image: url("../img/JDTime.png");
          background-size: contain;
          background-position: 50%;
          background-position-x: 50%;
          background-position-y: center;
          background-repeat: no-repeat;
          background-color: red;
        }
        .secKill-title {
          color: white;
          font-size:30px;
          width:100%;
          text-align: center;
          padding-top:31px;
        }
        .secKill-time {
          width:100%;
        }
        .secKill-time-title {
          color: white;
          font-size:20px;
          width:100%;
          text-align: center;
          margin-top:100px;
        }
        .secKill-time-secKill {
          margin-left: auto;
          margin-right: auto;
          width: 130px;
          height: 30px;
          margin-top: 10px;
          display: block;
        }
        .secKill-time-secKill > span:nth-child(-n+2) {
          float:left;
          position: relative;
          width: 30px;
          height: 30px;
          text-align: center;
          background-color: #2f3430;
          margin-right: 20px;
          color: white;
          font-size: 20px;
        }
        .secKill-time-secKill > span:last-child {
          float:left;
          position: relative;
          width: 30px;
          height: 30px;
          text-align: center;
          background-color: #2f3430;
          color: white;
          font-size: 20px;
        }
        </style>

<body>
    <div class="secKill">
        <div class="secKill-title">京东秒杀</div>
        <div class="secKill-time">
          <div class="secKill-time-title">16:00点场倒计时</div>
          <div class="secKill-time-secKill">
            <span>1</span>
            <span>2</span>
            <span>3</span>
          </div>
      </div>
    
      <script>
         /*  思路：1.先做出样式
          2.建立一个时间，随便写，尽量写大点
          3.获取三个时间的元素
          4.获取现在的天数，小时，分钟秒数
          5.小时，分钟，秒数判断
          6.获取小时，分钟，秒数的HTML结构
          7.调用
          8.设置间隔定时 */
        let leastTime = new Date('2020-7-24 10:57:40');
        let spanHour = document.querySelector('.secKill-time-secKill > span:nth-child(1)');
        let spanMinutes = document.querySelector('.secKill-time-secKill > span:nth-child(2)');
        // 封装的倒计时
        let spanSeconds = document.querySelector('.secKill-time-secKill > span:nth-child(3)');
        let updateSecKill = () => {
        
            let nowTime = Date.now();
            let time1 = parseInt((leastTime - nowTime) / 1000);
            let hours = parseInt(time1 / 3600 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            let minutes = parseInt(time1 / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            let seconds = parseInt(time1 % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;

            spanHour.innerHTML = hours;
            spanMinutes.innerHTML = minutes;
            spanSeconds.innerHTML = seconds;
            console.log(time1);
           /*  让定时器值为零时停止。
            因为获取的当前时间最小单位是秒数，
            而设置的时间/1000是毫秒数，
            相减后可能会出现负值，所以才设定条件time1<=0 */
            if (time1<=0) {
              clearInterval(a1)
          }
        }
        updateSecKill();
        let a1=setInterval(updateSecKill,1000);
       
      </script> 
</body>

5.数码时钟

<body>
    <img src="./img/0.png" alt="" id="hs">
    <img src="./img/0.png" alt="" id="hg">
    时
    <img src="./img/0.png" alt="" id="ms">
    <img src="./img/0.png" alt="" id="mg">
    分
    <img src="./img/0.png" alt="" id="ss">
    <img src="./img/0.png" alt=""id="sg">
    秒
    <script>
      /*   <!-- 1.思路：做好body的内容：六个图片，已存储跳动的数字。
id名，时分秒或：，
2.  先创建一个定时器及里面的新时间
setInterval(function() {
    let now=new Date()
    }, 1000);
3.定义秒数，分钟数，小时数。
 let s=now.getSeconds()
    let m=now.getMinutes()
    let h=now.getHours()
4.判断格个十位，并在控制台中看下是否跳动。 
 if(s<10){
        s='0'+s
    }
    else{
        s=s+''
    }
    console.log('十位'+s[0])//十位
    console.log('个位'+s[1])//个位。
// 5.让内容在页面中跳动.
 // 获取图片地址及元素
    sg.src='./img/'+s[1]+'.png'
    ss.src='./img/'+s[0]+'.png'-->*/


// 先拿到时间
setInterval(function() {
    let now=new Date()
    // console.log(now)
    // 获取秒数，分钟数，小时数。
    let s=now.getSeconds()
    let m=now.getMinutes()
    let h=now.getHours()

    // console.log(s)
    // 分出十位和各位
    if(s<10){
        s='0'+s
    }
    else{
        s=s+''
    }
    console.log('十位'+s[0])//十位
    console.log('个位'+s[1])//个位
    // 获取图片地址及元素
    sg.src='./img/'+s[1]+'.png'
    ss.src='./img/'+s[0]+'.png'
    // 放对应的内容时，记得把它变为字符串。中间放两个+用来拼接。
    if(m<10){
        m='0'+m
    }
    else{
        m=m+''
    }
    console.log('十位'+m[0])//十位
    console.log('个位'+m[1])//个位
    mg.src='./img/'+m[1]+'.png'
    ms.src='./img/'+m[0]+'.png'


    if(h<10){
        h='0'+h
    }
    else{
        h=h+''
    }
    console.log('十位'+h[0])//十位
    console.log('个位'+h[1])//个位
    hg.src='./img/'+h[1]+'.png'
    hs.src='./img/'+h[0]+'.png'
}, 1000);
    </script>

5-1这里是对应的图片，需要的可以下载，使用时一定要跟代码放同一文件夹下，并按0~9大顺序排好。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

k2460761639
关注
专栏目录
JavaScript作业
qq_45924868的博客
03-12 579
第一次写博客，想记录自己的学习记录，希望各位大佬多带带小弟。如有错误，还望诸位指点 通过if else语句判断今天是星期几： 代码提醒： 1.var data=new Data();获取当前时间 2.var day=date.getDay();获取星期几 3.多路分支采用if else if else if …语句实现 ```javascript <script type="te...
JavaScript 基础篇六 Math数学对象；Date日期对象；数组方法；字符串方法；基本包装类型
m0_55170432的博客
03-28 299
1.0 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等（数学、日期、数组、字符串） 2
Javascript 中 Date类的相关应用及案例
qq_45766770的博客
05-08 381
Date( )简介，Date（）是Javascript中内置的一个对象， 所以我们可通过new关键字来实例化这个对象 1.小试牛刀 我们先来显示一下系统当前时间，这里指的是本机电脑系统，如果修改本机系统时间，那么通过该函数显示的也会改变...
JS练手小作业：根据不同时间显示不同的文字
Chtholly_Nota_L的博客
07-07 698
这个功能在网站上很普遍，比如说，在早上提示早上好，到了晚上就提示该休息了，主要方法还是运用Date对象来实现。 就直接上代码了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
js日常小作业
qq_48135073的博客
08-22 526
js日常小作业
js作业题分享
m0_69148200的博客
08-05 418
适合js 有一定基础的学习和参考
JavaScript几个小作业
01-03
最后一个作业是对Math对象的一些基本数学函数进行测试。`Math.ceil()`, `Math.floor()`, 和 `Math.round()`分别用于向上、向下和四舍五入到最接近的整数。`Math.abs()`返回一个数的绝对值，`Math.exp()`计算e（自然...
html上机作业,JavaScript语言上机作业.doc
weixin_42466723的博客
06-25 745
《JavaScript语言》上机作业一、JavaScript概述(教材第1章第15页)1、编写JavaScript脚本，弹出一个对话框输出“我喜欢学JavaScript”，并进行测试。2、编写JavaScript脚本，计算商品的销售额，并存储在单独的add.js文件中，然后在index.html文件中调用脚本文件，并运行JavaScript程序。二、JavaScript编程基础(教材第3章第68页...
S2 JAVASCRIPT 所有阶段+作业+指导学习+在线学习
03-30
在“S2 JAVASCRIPT 所有阶段+作业+指导学习+在线学习”中，你将有机会深入学习这些知识点，并通过作业实践来巩固所学。指导学习通常会有详细的教程、实例讲解和解答疑惑，而在线学习资源则可以提供额外的学习材料和...
测试面试之数据库
Dave0002的博客
07-19 619
测试面试之Mysql
javascript 对象操作作业题
10-16
javascript 对象操作作业题，面向对象操作题
JS结课作业,html结课作业,JavaScript
09-10
js编写的小网页，可以实现基本的网页功能
JS小作业
qq_45874580的博客
11-03 542
1、九九乘法表 var s = '';//字符串拼接 for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { s += j + '*' + i + '=' + i * j + ' '; } s += '\n'; } console.log(s); 显示结果为： 2、冒泡排序 冒泡排序原理：从第一个数字开始，让这个数字依次与后一个数字比较，若后一个数字大/小，则两个数交换位置.
js作业（1）
最新发布
weixin_63492023的博客
11-21 138
js作业（1）
JS鼠标事件
weixin_67358175的博客
09-28 310
作业
js作业练习（二）
生活步步是坎坷，笑到最后是大哥
05-07 1161
1.小 S，小L，小P，小R和小H 五个人排队站在一个出售’克隆可乐’的自动贩卖机前 ； 队伍中除了他们五个没有其他人 。 队形如下 ： 小 S，小L，小P，小R，小H 队列的第一个人 （小S）买了一听可乐，喝下去后变成了两个小S！然后两个小S心满意足的站到了队伍的最后。此时队形变成了这样： 小 L，小P，小R，小H，小S，小S 然后队列中下一个人 （小L）也买了听可乐，喝下去后变成两个人，站到了...
JS第五次作业，条狗
aa8869138的博客
03-16 163
Document          *{         margin: 0;         padding: 0;     }     .top1{         width:100%;         height:80px;         margin:0 auto;         background:#8B25C6 url(topbanner.jpg)
js作业练习
生活步步是坎坷，笑到最后是大哥
05-05 1327
1.求1到400所有自然数中一共出现过多少次“1”？ <script> // window.onload=function(){ document.write("求1到400所有自然数中一共出现过多少次“1”？<br />"); // } function cishu(){ count=0; for(var i=1;i<=21;i++) { ...
js个人博客设计大作业
qq_53114142的博客
12-19 4053
这里介绍我js大作业的效果和思路及源码，有兴趣的小伙伴可以一起参考参考(((┏(;￣▽￣)┛装完逼就跑
软件测试：NextDate函数用例设计与等价类划分详解
在软件测试领域，特别...设计NextDate函数的测试用例需要考虑到输入数据的有效性和边界条件，通过细致的测试策略确保函数在各种情况下都能提供准确的结果。这对于提高软件质量，减少bug和提升用户满意度具有重要意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值