精华内容
下载资源
问答
  • //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date....
  • 根据开始时间和需要持续时间来做一个倒计时的功能 比如我的开始时间为2019-3-12 17:30:00,需要它在30分钟之后过期 思路:开始时间+过期时间=最后的时间 最后的时间-动态的当前时间=倒计时 <body> ...

    根据开始时间和需要持续的时间来做一个倒计时的功能
    比如我的开始时间为2019-3-12 17:30:00,需要它在30分钟之后过期
    思路:开始时间+过期时间=最后的时间
    最后的时间-动态的当前时间=倒计时

     <body>
    <span id="timer"></span>
    <script>
    	countdown('2019-3-12 17:30:00',30)  //第一个参数为开始时间,第二个参数为多少分钟后过期
    	function countdown(val1,val2) {
    		var now=new Date(val1);  //处理开始时间
    		var minutes=Number(val2);  //处理输入的过期时间
    		var end=now.setMinutes (now.getMinutes () + minutes); //计算最后时间
    		var time_now =  new Date().getTime(); //当前时间
    		var msec =end - time_now;   //最后时间-当前时间
    		if(msec>0){
    		let day = parseInt(msec / 1000 / 60 / 60 / 24)
    		let hr = parseInt(msec / 1000 / 60 / 60 % 24)
    		let min = parseInt(msec / 1000 / 60 % 60)
    		let sec = parseInt(msec / 1000 % 60)
    		day = day
    		hr = hr > 9 ? hr : '0' + hr
    		min = min > 9 ? min : '0' + min
    		sec = sec > 9 ? sec : '0' + sec,
    		document.getElementById('timer').innerHTML=`${day}天${hr}小时${min}分${sec}秒`
    		}else{
    			clearInterval(tim);
    		}
    		const that = this
    		var tim=setTimeout(function () {
    			that.countdown('2019-3-12 17:30:00',30)
    		}, 1000)
    	}
    </script>
    </body>
    

    //获取服务器时间,用于防止本机时间错乱的情况下,可用返回数据时头部的时间作为倒计时的当前时间

    
    <script>
    	var severtime;	
    	var time_now;
    	function getServerDate(){
    		var request = new XMLHttpRequest();
    		request.open('GET', '/',false);
    		request.send();
    		severtime=new Date(request.getResponseHeader("Date"))
    		time_now =  severtime.getTime(); //当前时间
    		console.log('time_now',time_now)
    	}
    getServerDate()
    </script>
    
    
    展开全文
  • JS 和 CSS 实现持续的动画效果 逛论坛的时候看到一个问题, js 是怎么实现持续的动画效果的? 第一时间想到的是定时器, 后来看到有同学提到了 requestAnimationFrame, 由于之前没有对相关方法有所了解, 于是便去查了下...

    JS 和 CSS 实现持续的动画效果

    逛论坛的时候看到一个问题, js 是怎么实现持续的动画效果的? 第一时间想到的是定时器, 后来看到有同学提到了 requestAnimationFrame, 由于之前没有对相关方法有所了解, 于是便去查了下, 顺便也记录了下 animation 的使用.

    animation(CSS)

    兼容性与属性

    猛戳 这里查看兼容性
    • animation-name: 动画名称
    • animation-duration: 动画时长
    • animation-timing-function: 动画执行方式
    • animation-delay: 动画延迟执行时间
    • animation-iteration-count: 动画执行次数
    • animation-direction: 是否反向执行动画
    • animation-fill-mode: 动画执行前后的样式

    实例

    jsfiddle预览

    .box {
      width: 200px;
      height: 200px;
      background-color: aqua;
      position: absolute;
      left: 0;
      top: 0;
      animation: test 3s linear 2s infinite;
    }
    @keyframes test {
      from {
      }
      to {
        width: 50px;
        height: 50px;
        background-color: red;
        opacity: 0.5;
        left: 500px;
        top: 500px;
      }
    }
    <div class="box"></div>

    requestAnimationFrame(JS)

    兼容性与基本概念

    猛戳 这里查看兼容性

    优势:

    • 浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
    • 一旦页面不处于浏览器的当前标签,就会自动停止刷新。这就节省了CPU、GPU和电力

    使用:

    持续调用 requestAnimFrame 即可

    可以使用 cancelAnimationFrame 清除动画

    举例

    jsfiddle预览

    #anim {
      position: absolute;
      left: 0px;
      width: 150px;
      height: 150px;
      line-height: 150px;
      background: aqua;
      color: white;
      border-radius: 10px;
      padding: 1em;
    }
    <div id="anim"> Click here to start animation</div>
    // 兼容性处理
    window.requestAnimFrame = (function() {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback, element) {
          window.setTimeout(callback, 1000 / 60)
        }
      )
    })()
    
    var elem = document.getElementById('anim')
    var startTime = undefined
    
    function render(time) {
      time = Date.now()
      if (startTime === undefined) {
        startTime = time
      }
      elem.style.left = ((time - startTime) / 10) % 300 + 'px'
      elem.style.top = ((time - startTime) / 10) % 300 + 'px'
      elem.style.borderRadius = ((time - startTime) / 10) % 300 + 'px'
      elem.style.opacity = Math.floor((time - startTime / 100)) % 2 === 0 ? 1 : 0.3
    }
    
    elem.onclick = function() {
      (function animloop() {
        render()
        requestAnimFrame(animloop, elem)
      })()
    }

    参考

    MDN
    requestanimationframe

    附录

    原文发表在github,你也可以点击这里浏览下我的其他文章,欢迎starfollow,谢谢!!!

    展开全文
  • 使用js实现一个持续的动画效果 定时器思路 var e = document.getElementById('e') var flag = true; var left = 0; setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e....

    使用js实现一个持续的动画效果

    定时器思路

    var e = document.getElementById('e')
    var flag = true;
    var left = 0;
    setInterval(() => {
        left == 0 ? flag = true : left == 100 ? flag = false : ''
        flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
    }, 1000 / 60)
    

    requestAnimationFrame

    //兼容性处理
    window.requestAnimFrame = (function(){
        return window.requestAnimationFrame       ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame    ||
               function(callback){
                    window.setTimeout(callback, 1000 / 60);
               };
    })();
    
    var e = document.getElementById("e");
    var flag = true;
    var left = 0;
    
    function render() {
        left == 0 ? flag = true : left == 100 ? flag = false : '';
        flag ? e.style.left = ` ${left++}px` :
            e.style.left = ` ${left--}px`;
    }
    
    (function animloop() {
        render();
        requestAnimFrame(animloop);
    })();
    

    使用css实现一个持续的动画效果

    animation:mymove 5s infinite;
    
    @keyframes mymove {
        from {top:0px;}
        to {top:200px;}
    }
    
    • animation-name 规定需要绑定到选择器的 keyframe名称。
    • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
    • animation-timing-function 规定动画的速度曲线。
    • animation-delay 规定在动画开始之前的延迟。
    • animation-iteration-count 规定动画应该播放的次数。
    • animation-direction 规定是否应该轮流反向播放动画

    个人博客地址:大家可以看看

    展开全文
  • 文章目录说一下JS执行机制 整理的同时自己也复习一下,答案仅供参考。 说一下JS执行机制 1.JS是单线程的 JS中的代码都是串行的, 前面没有执行完毕后面不能执行 2.执行顺序 程序运行会从上至下依次执行所有的同步...

    整理的同时自己也复习一下,答案仅供参考。

    说一下JS执行机制

    1.JS是单线程的

    JS中的代码都是串行的, 前面没有执行完毕后面不能执行

    2.执行顺序

    1. 程序运行会从上至下依次执行所有的同步代码

    2. 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中

    3. 当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件

    4. 一旦满足条件就执行满足条件的异步代码

    3.宏任务和微任务

    在JS的异步代码中又区分"宏任务(MacroTask)“和"微任务(MicroTask)”

    宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务

    微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务

    4.常见的宏任务和微任务

    宏任务(MacroTask): setTimeout, setInterval, setImmediate(IE独有)…

    微任务(MicroTask): Promise, MutationObserver ,process.nextTick(node独有) …

    注意点:

    所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列。

    所有放到队列中的任务都采用"先进先出原则", 也就是多个任务同时满足条件, 那么会先执行先放进去的。

    5.完整执行顺序

    1. 从上至下执行所有同步代码

    2. 在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中

    3. 当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调

    4. 当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求的所有回调

    注意点:

    每执行完一个宏任务都会立刻检查微任务队列有没有被清空, 如果没有就立刻清空


    防抖和节流的原理及实现

    节流和防抖:限制函数的执行次数

    1.防抖

    防抖原理:

    事件响应函数在一段时间后才执行,如果在这段时间内再次调用,则重新计算执行时间。可理解为通过setTimeout的方式,在一定时间间隔内,将多次触发转变成一次触发

    应用场景:

    1. scroll时间滚动触发
    2. 搜索框输入查询
    3. 表单验证
    4. 按钮提交事件
    5. 浏览器窗口缩放

    简单实现:

    function debounce(func, wait) {
      let timeout
      return function() {
        let _this = this
        let args = arguments
        clearTimeout(timeout)
        timeout = setTimeout(function() {
          func.apply(_this, args)
        }, wait)
      }
    }
    

    2.节流

    原理:如果你持续触发事件,每隔一段时间,只执行一次操作,可理解为减少一段时间之内事件的触发频率。

    应用场景:

    1. DOM元素的拖拽实现功能
    2. 射击游戏
    3. 计算鼠标移动的距离
    4. 监听scroll滚动事件

    简单实现:

    function throttle(fn, delay) {
      let begin = 0
      return function() {
        let cur = Date.now()
        if(cur - begin > delay) {
          fn.apply(this, arguments)
          begin = cur
        }
      }
    }
    

    节流和防抖的详细实现

    展开全文
  • JS实现实时显示时间

    千次阅读 2018-04-03 09:47:40
    在之前的项目中有做到需要在网页中实时显示当前时间实现的效果如图所示:1. html结构&lt;div class="col-xs-12 col-sm-6"&gt; &lt;i class="fa fa-plus-square-o" aria-hidden...
  • JS逆向学习笔记 - 持续更新

    千次阅读 多人点赞 2020-11-11 00:46:53
    JS逆向学习笔记 文章目录JS逆向学习笔记一. JS Hook1. JS HOOK 原理和作用原理:替换原来的方法. (好像写了句废话)作用: 可以去Hook一些内置的函数, 例如Debugger, setInterval,JSON.stringify等等2.JSHook 检测与...
  • 原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需要用socket保持与客户端通信,持续保有长连接,利用flush()持续更新浏览器UI,...
  • 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区!!! Vue...
  • javascript和C#的比较(持续更新

    万次阅读 2008-05-26 21:50:00
    由于这段时间在学习ajax,所以想把javascript和C#系统的比较下,写这篇文章主要的目的是想要系统了解javascript和C#当中的一些语法区别,还有两种语言特有的属性,只以javascript为主,以后会不段更新,只供参考,...
  • node.js 史上最详细 (博主持续更新)

    千次阅读 2020-06-27 23:06:33
    诞生于2009年,它不是一门语言也不是一门框架,它是基于Google V8引擎的JavaScript运行时环境,同时结合Libuv拓展了JavaScript功能,使之支持IO,fs等语言才有的特性,使得JavaScript能够同时具有DOM操作(浏览器)...
  • 最近这段时间也是在重新沉淀自己的技术栈和学习新的技术,虽然在js编码风格上使用函数式编程是一个非常好的习惯,但是自己并没有一个详细的概念,想到underscore.js几乎大量的api的实现都是基于函数式的,所以就考虑...
  • 如果各位朋友有更好用的方法,欢迎在下方评论,我也会第一时间感谢和更新文章内容的,拜谢!!! 1.Map map是一个二维数组,一组键值对的结构,具有极快的查找速度: var m = new Map ( [ [ 'Michael' , ...
  • vue.js经典实例代码(持续更新中~)

    千次阅读 2019-03-20 17:56:03
    v-model指令可以对表单元素进行双向数据绑定,在修改表单元素值的同时,实例vm中对应的属性值也同时更新。 <!DOCTYPE html> <title>hello world ...
  • javascript es6 vue react jQuery webpack、gulp、grunt node http web安全 前端性能 浏览器 算法相关 设计模式 正则表达式 职业规划 参考资料 html/ css 行内元素和块级元素举几个例子? ...
  • 2,JavaScript实现 2.1核心(ECMAScript) 2.2文档对象模型(DOM) 2.3浏览器对象模型(BOM) 作为一名入行不久的技术小白,对自己现在所使用的各种技术感到深深的疲惫。因为每个技术或语言实在太浩瀚了,但是在...
  • 我是歌谣 放弃很容易 但坚持一定很酷 欢迎 关注公众号前端小歌谣一起讨论前后端知识 歌谣最全前端面试题(建议收藏,欢迎讨论) 今日Vue更新 明日更新HTML CSS暂时已经更新完毕(CSS目录汇总) 与歌谣通关前端面试题...
  • 说在前面 在网上看了许多的贪吃蛇这类游戏,效果基本还可以,功能也实现了,不过看代码大都是冗余或杂乱不堪的,难以维护。...1. 整体实现采用原生JS,使用ES6的Class类构造,完美的诠释了面向对象编程的编程思想。.
  • dubbo知识点总结 持续更新

    千次阅读 多人点赞 2019-10-17 20:49:21
    Dubbo 支持哪些协议,每种协议的应用场景,优缺点?... rmi: 采用 JDK 标准的 rmi 协议实现,传输参数和返回参数对象需要实现 Serializable 接口,使用 java 标准序列化机制,使用阻塞式短连接,传输数 ...
  • 这是我在学习中的一些笔记总结,包括闭包、作用域、原型等等常考热点,这些将以面试题的方式呈现给大家,全文分为 JS 基础、JS 高级、jQuery 和 vue 四部分,认真读完并且敲几遍代码,您定会受益匪浅,同时希望大家...
  • 使用JavaScript实现区块链

    千次阅读 2018-11-22 10:09:41
    使用javascript实现区块链, 实现了 PoW工作量证明算法挖矿 P2P网络,挖到的区块后广播给其他节点 不涉及交易功能 区块链基本概念:一个存储不断增加的有序记录的分布式数据库 这里我使用js实现了最基本的区块链和...
  • js实现获取当前时间,并一直刷新

    千次阅读 2015-10-10 19:34:43
    <script src="/jquery/jquery-1.11.1.min.js"> <script type="text/javascript"> window.onload=function(){ setInterval(function(){ var dateTime = new Date(); var year=dateTime.getFullYear(); var ...
  • cinemaJS 用js实现电影播放效果 一、基本功能 动画 动画内容 持续时间 延迟时间 音乐 播放的时间间隔 字幕 什么时候显示 显示多久 二、基本用法
  • 防抖表示当指定时间内持续触发某个事件时,该事件会进行初始刷新,重新开始计算。 function debounce(fn, time) { ...节流当指定时间持续触发某个事件时,该事件只会执行首次触发事件,也就是说指定时间内只会触
  • <script language =javascript > var i=0;//图片索引 var arr=new Array(); //图片列表 arr[0]="images/pic3.jpg"; arr[1]="images/pic1.jpg"; arr[2]="images/pic2.jpg"; function slide_photos() { var photo...
  • WEB前端2020年更新实用代码段(持续更新

    千次阅读 多人点赞 2020-01-26 21:51:01
    只有当我们光标离开输入框的时候,它才会更新视图,相当于在onchange事件触发更新。 2、.trim < input type = " text " v-model.trim = " value " > 过滤一下一些输入完密码不小心多敲了一下空格的兄弟...
  • 一、持续集成是什么? 持续集成是一种软件开发的实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化...
  • 2020前端面试总结(持续更新

    万次阅读 多人点赞 2020-06-18 16:32:04
    因此配置多个域名能够最大限度的增加并发请求量,但这里有个缺点就是会增加浏览器域名解析的次数,这里建议利用CDN来加载不是经常更新和修改的静态资源(图片,css库,js第三方库等等)。一个是CDN域名一般都会缓存...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,810
精华内容 27,124
关键字:

js实现时间持续更新