js中实现sleep暂停/睡眠功能的多种方式

由于很多语言都有sleep函数,但是js中没有,下面介绍JavaScript实现类似sleep的多种方式。1、利用循环function sleep(d){ for(var t = Date.now();Date.now() - t <= d;); } sleep(5000); //当前方法暂停5秒优点:简单粗暴,通俗易懂。缺点:这是最简单粗暴的实现,确实 sleep 了,也确实卡死了,CPU 会飙升,无论你的服务器 CPU 有多么 Niubility。2、Promise版本  function sleep(ms) { return new Promise(re

js练习笔记:10道JavaScript题目

十个练习题目,感觉比较典型,分享一下。累加函数addNum实现一个累加函数addNum,参数为number 类型,每次返回的结果= 上一次计算的值+ 传入的值var addNum = (function() { var result = result 0; return function(num) { result += num; return result; }; })(); addNum(10); // 10 addNum(12); // 22 addNum(30); // 52

CSS 技术技巧_提高你CSS技术的法则

1.不要让你的代码脱离你的掌控,尽量简洁别让你的代码脱离你的掌控这是编程的一种通用建议,不仅仅适合css. 当你开始写代码的时候,先思考,思考以下几个问题:我怎样实现?有其他方法实现么?怎样优化(简洁,可维护,等等)?急于编码会浪费时间,你有可能花了一个小时也没实现,不得不从头再来,这不应该发生。如果你花了好几个小时写一个css幻灯片,最终没办法用了个js幻灯片插件或者别的,这是很蛋疼的,并不是说你没成功,而是无谓的浪费了很多时间。如果项目有deadline的话,你就要悲剧了。保持他的简单性Css很简单,但如果你想,同样可以变得很复杂。在很多场景里,最简单的即是最好的。当你要实现什么效果的时候

CSS隐藏元素的五种方法

用css隐藏页面元素有许多种方法。1、opacity:02、visibility:hidden3、diaplay:none4、position:absolute5、clip-pathopacity     opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。visibility     第二个要说的属性是visibility。将它的值设为hidden将隐

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现,当我发神经似的来回滑动时,事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,即动画过程中,鼠标滑过这个div,不会触发该事件。代码如下:$("div").hover( function() { $(this).animate({"margin-top":"100px"},1000); }, function() { $(this).animate({"margin-top":"200px"},1000); } );这是由于元素绑定hover事件之后,如果光标移入移出

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。一、打字效果打字效果即把一段话一个字一个字的显示出来。首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。循环总字数来实现一个字一个字的输出。  html:<form name="tickform"> <textarea name="tickfield" rows="5" cols="100"> cool</textarea> </form> <button onclick="doTypi

初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。在“纯粹的”CSS支持变量之前,我们有像Less和Sass这样的预处理器。但是它们需要在使用前进行编译,因此(有时)会增加额外的复杂性。 如何定义和使用CSS变量从我们最熟悉的语言JavaScript开始:在JavaScript中定义变量使用vars。要声明一个简单的JavaScript var,如下内容:var mainColor = 'red'; 要声明一个CSS变

利用正则表达式去除所有html标签,只保留文字

后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字。标签的格式有以下几种1.<div></div>2.<img />3.自定义标签<My-Tag></My-Tag>针对以上几种标签,确定的正则的规则是 reg=/<\/?.+?\/?>/g<表示尖括号第一个\/?表示</div>这种标签的情况.+?表示将中间所有内容替代掉第二个\/?表示<img/>这种情况/g表示全局替换代码如下:<!DOCTYPE html> <html lan

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。原因之一:setInterval无视代码错误setInterval有个讨厌的习惯,即对自己调用的代码是否报错这件事漠不关心。换句话说,如果setInterval执行的代码由于某种原因出了错,它还会持续不断(不管不顾)地调用该代码。看演示原因之二:setInterval无视网络延迟假设你每隔一段时间就通过Ajax轮询一次服务器,看看有没有新数据(注意:如果你真的这么做了,那恐怕你做错了;建议使用“补偿性轮询”(backoff polling))。而

JS中this的指向问题(全)

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结。一、全局作用域中this在全局作用域中指window。//全局作用域中 console.log(this)//window a =1; console.log(this.a) //相当于window.a 1 //普通函数中 function fn(){ console.log(this) } fn()//window二:闭包中指window function fn(){ function fn2(){ console.log(this)

原生js监听浏览器后退按钮的事件方法

首先我们要了解浏览器的history。大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测,那么我们就可以进行监听。返回、后退、上一页按钮点击监听实现代码:if(window.history && window.history.pushState){ window.addEventLis

Web前端工程师必备的PS技能之切图

1.        PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了?有个选项没有选择“菜单栏-视图-对齐”,勾选下,里面的选项你可以看着勾选。还有一点要注意,你想吸附到图层像素边缘的时候,需要你选中这个图层。2.        按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”。3.      &nbsp