11 2020 档案
摘要：深入理解css中position属性及z-index属性 在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,stick
阅读全文
摘要：HTML代码部分： <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">天</div> </div> <div> <span class="hours"></span> <div class="sma
阅读全文
摘要：在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况： 1、兄弟元素之间margin-top失效 先看下面代码： <div> <div class="box1"> float: left
阅读全文
摘要：var在ECMAScript的所有版本中都可以使用，而const和let只能在ES6及更晚的版本中使用。 var，let，const三个关键字的区别 var： 1）声明作用域：在函数内部，使用var定义一个变量（局部变量），在函数被调用完之后，该变量会被立即销毁。在定义变量时如果省略var,就会创建
阅读全文
摘要：4种方法教你如何截取JS字符串最后一位 方法一：运用String对象下的charAt方法 charAt() 方法可返回指定位置的字符。 str.charAt(str.length – 1) 请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串
阅读全文
摘要：在编程中，总会遇到各种各样的获取时间的要求，下面我们来看一下获取不同时间格式的方法有哪些？如果不记得的话建议收藏哦！ 1、获取当前的日期和时间 方法：new Date() console.log(new Date())//Wed Nov 04 2020 18:20:49 GMT+0800 (中国标准
阅读全文
摘要：弹出框，我们也称为模态框。 1.点击弹出层，会弹出模态框， 并且显示灰色半透明的遮挡层。 2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开，可以停止拖动模态框移动 案例分析: 点击弹出层， 模态框和遮挡
阅读全文
摘要：我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标 如果想要移动一下鼠标
阅读全文
摘要：offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 offsetWidth 包含padding+border+width offsetWidth 等属性是只读属性，只能获取不能赋值 所以，我们想要获取元素大小位置，用offset更合适 style st
阅读全文
摘要：offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：1、 JS 是单线程 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。 这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 2、 同步任务和异步任务 单线程导致的问题就
阅读全文
摘要：window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 index页面的代码： <!DOCTYPE html> <html lang="en">
阅读全文
摘要：navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。 下面前端代码可以判断用户那个终端打开页面，实现跳转 if((navigator.userAgent.match(/(phone|pad
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：Index页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h
阅读全文
摘要：<div></div> <script> console.log(location.search); // ?uname=andy / 1.先去掉？ substr('起始的位置'，截取几个字符); var params = location.search.substr(1); // uname=an
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：什么是 location 对象 URL location 对象的属性
阅读全文
摘要：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。 现阶段，我们先了解一下几个this指向 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） 方法调用中谁调用
阅读全文
摘要：点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：开启定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval() 开启定时器 普通函数是按照代码顺序直接调用。 简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。例如：定时器中的调用函数，事件处理函数，也是回调函数。 以前我
阅读全文