首页
学习
活动
专区
圈层
工具
发布

教你用 JavaScript 设计一个 Neumorphism 风格的数字时钟 (代码详解)

时钟是我们用来测量时间的装置。如果使用得当,时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站,例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。...思路 使用日期对象获取每秒的时间,然后使用我们通过每秒调用相同函数获得的新时间在浏览器上重新渲染时间,并使时钟看起来更有吸引力。...第 2 步:创建 Date 对象的实例。 第三步:使用Date对象的方法获取“时”、“分”、“秒”。 第 4 步:根据小时值设置 AM/PM。....textContent = time; 11.每秒调用一次该函数,使用 setInterval() 方法并将时间间隔设置为 1000ms,等于 1s setTimeout(showTime, 1000...关注作者公众号【海拥】回复【代码】,免费下载CSDN资源和百度文库资源。更多相关文章及我的联系方式我放在这里:GitHub 如果你真的从这篇文章中学到了一些新东西,喜欢它,收藏它并与你的小伙伴分享。

1.3K41
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    electron开发客户端注意事项

    = document.getElementById("ueditor_0").contentWindow.document; var observer = new MutationObserver(records...因为我用的electron-vue,他又两种模式,生产模式和开发模式 在生产模式下没任何问题 在开发模式下,它其实是起了一个webserver,让electron加载一个localhost的地址 这样做主要是为了使用...的操作剪切板的能力才搞定的 先把文章内容放到剪贴板,再focus知乎的编辑器,再执行黏贴事件 代码如下: const { clipboard, ipcRenderer, remote...(); setTimeout(function () { document.getElementsByClassName("WriteIndex-titleInput...,我放到了阿里云的CDN里,下载速度超赞,大家可以下载来用用看 有什么问题,请不吝提交issue,有issue必回!

    2.4K40

    JavaScript 异步编程

    而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。...什么时候用异步编程 在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。...; } setTimeout(print, 3000); 这段程序中的 setTimeout 就是一个消耗时间较长(3 秒)的过程,它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程...当然,JavaScript 语法十分友好,我们不必单独定义一个函数 print ,我们常常将上面的程序写成: 实例 setTimeout(function () { document.getElementById...如果你使用完整的 jQuery 库,也可以更加优雅的使用异步 AJAX: 实例 $.get("https://www.runoob.com/try/ajax/demo_test.php",function

    13010

    防抖和节流

    背景 在实际开发中,我们会遇到这么一个场景:我们需要注册一个事件,但有时候这个事件会在短时间内频繁触发,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题...将需要执行的代码放入setTimeout定时器中,再返回定时器引用给timer缓存。 如果倒计时结束,没有新的方法触发滚动事件,则执行setTimeout中的代码。...为了避免全局变量污染,这里推荐闭包的写法: // 首次不立即执行 function debounce(func, wait) { let timer = null; return function...比如游戏中英雄的技能CD,当CD还没好时,无法使用技能。...监听id为throttle元素的滚动事件。当isOk为true,代表当前滚动处理事件是空闲的,可以使用。然后下一步的操作就是isOk = false。

    87110

    JavaScript

    js的作用: js的组成: 注释: js的输入输出: prompt取值是字符型的 变量 var age;//声明一个名称为age的变量,赋值var age=18; 只声明不赋值值为undefined...ID的DOM Element对象) document.getElementById(); 可以使用console.dir();查看 通过标签名获取(返回的是一个指定标签的集合) element.getElementByTagName...也叫事件三要素 //1.事件源=事件被触发的对象(按钮) var btn = document.getElementById('btn'); //2.事件类型=如何触发,例如:点击,鼠标悬停,按键按下...盒子时,不阻止事件冒泡,会发生弹出三个提示框(son、father和document),阻止事件冒泡后,父亲元素不在冒泡弹出框。...keyCode 判断用户按下的是否是s键 // 搜索框获得焦点: 使用 js 里面的 focus() 方法 var search = document.querySelector

    1.5K70

    BOM和DOM

    的子对象 navigator对象(了解即可)     浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。...语法: prompt("请在下方输入","你的答案")     可以通过用户输入的内容来判断我们怎么去进行后面的操作   除了那个警告框(用的也不都),其他的都很少用,比较丑陋,了解一下就行 计时相关...setTimeout() 一段时间后做一些事情       语法: var t=setTimeout("JS语句",毫秒) 第一个参数js语句多数是写一个函数,不然一般的js语句到这里就直接执行了,...在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。       ...      1.对于没有中横线的CSS属性一般直接使用style.属性名即可。

    1K10

    利用Vue自定义指令让你的开发变得更优雅

    el.focus() }})然后你可以在模板中任何元素上使用新的 v-focus attribute,如下focus />注:这里除了全局注册,也可以采用局部注册的方式,实际开发中可以使用...vue另一项方便的功能mixin来将对应的指令混入你想使用的文件中,以达到代码的复用,那么开始进入正题吧。...我们再来看看另一个移动端H5会遇到的问题,并且还是用Vue指令来解决它。弹窗背景页不滚动在移动端开发中,页面弹出滚动窗口时,需要将背景页固定住不动,否则会出现"滚动穿透"的现象。...实现一个copy工具有时我们需要页面点击可以"一键复制"的功能,可能大家都有用到一个叫vue-clipboard的库,知道了指令的使用,实现一个copy自然也不在话下,那么就自己动手写一个vueCopy...如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~

    58120

    分享一次利用任务切片解决页面卡顿的性能优化~

    我知道了,长任务执行导致页面卡顿,使用任务切片的方式解决! 没错,这里确实是使用任务切片的方式能够解决!但是,我想问一下,任务切片解决卡顿问题的底层原理是什么样子的?...,让人感觉到明显的卡顿和不适感; 帧率波动很大的动画,亦会使人感觉到卡顿 也就是说想要保证页面流畅不卡顿,浏览器对每一帧画面的渲染工作需要在16ms(1000ms/60)之内完成!...回到我们的页面代码,我们也可以按照这个思路,将load函数代码拆分成多个小任务,保证16ms内能执行完一次事件循环,这样才能保持页面流畅不卡顿,而这个时候,就需要应用到我们的任务切片了!...一般我们可以使用setTimeout或者requestAnimationFrame实现任务切片,这里我们使用setTimeout举例说明: function load() { let total...curIndex + pageCount) },0) } loop(total,index); } 此时我们运行代码之后发现,点击执行任务按钮时,页面不再卡顿,输入框能够正常focus

    75620
    领券