前端模块化详解(完整版)

在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管... ...

子元素margin-top导致父元素移动的问题

问题描述 今天在修改页面样式的时候,遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个margin-top 的效果。 今天就来说说整个问题产生的原因,以及解决方案。 问题分析 在MDN上面有这么一段文字: 块的上外边距(marg ...

JavaScript 实现网页图片的等比缩放

网上有很多写使用纯CSS来实现图片的等比缩放的,到目前为止,我还没有发现一个可用的方法。这里的等比缩放是指按照图片的原始尺寸和比例进行缩放。 网上的方法大多如下: img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } ...

js模仿京东首页的倒计时功能

##模仿京东首页的倒计时 我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时。 先看看京东首页的倒计时。 思路: 如何倒计时? 给一个未来的时间。然后计算未来时间到现在的时间戳。 用定时器每隔一秒,计算时间戳。然后把时间戳转换为时分秒。 转换的时候,要注意取整和取余,别搞混了。 ...

JavaScript入门-对象(二)

JavaScript对象(二) 本篇,主要讲了面向对象、this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情。 面向对象的编程的主要思想是把构成问题的各个事物分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描述 ...

const关键字:终于拥有真正的常量声明语句

本文首发于个人网站:const关键字:终于拥有真正的常量声明语句 你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— const。在说 const 关键字之前,大叔先和你唠唠大叔自己对 const 的感受 —— JavaScript 尼玛终于可以声明真正的常量啦!大叔为啥会发出这样滴感叹?实在 ...

JS网站广告实现侧边栏滚动至div顶部后固定、鼠标滚动下拉侧边栏DIV固定

网站或博客经常要挂广告,固定在侧边栏上,每次用到场景都不一样,每次都现找案例,今天把各个场景在这里汇总记录一下! 目前遇到这两种固定div的场景:1、侧边栏滚动至div顶部后固定 ;2、滚动下拉侧边栏DIV固定 场景一、JS 实现DIV 滚动至顶部后固定 代码如下: <!DOCTYPE HTML> ...

【JavaScript】7-7 12-24小时制 (15分)

题目: 编写一个程序,要求用户输入24小时制的时间,然后显示12小时制的时间。 输入格式: 输入在一行中给出带有中间的:符号(半角的冒号)的24小时制的时间,如12:34表示12点34分。当小时或分钟数小于10时,均没有前导的零,如5:6表示5点零6分。 提示:在scanf的格式字符串中加入:,让s ...

深入理解浏览器的缓存机制

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直... ...

【JavaScript】7-2 然后是几点 (15分)

题目: 有时候人们用四位数字表示一个时间,比如 1106 表示 11 点零 6 分。现在,你的程序要根据起始时间和流逝的时间计算出终止时间。 读入两个数字,第一个数字以这样的四位数字表示当前时间,第二个数字表示分钟数,计算当前时间经过那么多分钟后是几点,结果也表示为四位数字。当小时为个位数时,没有前 ...

【JavaScript】7-1 厘米换算英尺英寸 (15分)

题目:如果已知英制长度的英尺foot和英寸inch的值,那么对应的米是(foot+inch/12)×0.3048。现在,如果用户输入的是厘米数,那么对应英制长度的英尺和英寸是多少呢?别忘了1英尺等于12英寸。 输入格式: 输入在一行中给出1个正整数,单位是厘米。 输出格式: 在一行中输出这个厘米数对 ...

前端基础功能,原生js实现轮播图实例教程

轮播图是前端最基本、最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。 本实例效果如下图所示: 根据实例效果,需要的元素有图片、中 ...

let关键字:加强版的var关键字

本文首发于个人网站:let关键字:加强版的var关键字 你好,今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— let。再说 let 的具体用法之前,大叔想先和你说说大叔自己对 let 的感受 —— let 其实就是加强版的 var。为啥这么说呢?别急,且听大叔慢慢道来。 首先,let 和 var ...

纯函数

纯函数 纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。 比如 slice 和 splice,这两个函数的作用并无二致——但是注意,它们各自的方式却大不同,但不管怎么说作用还是一样的。我们说 slice 符合纯函数的定义是因为对相同的输入它保证能返回相同的输出。 ...

【JavaScript PAT乙级】1001 害死人不偿命的(3n+1)猜想

卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半;如果它是奇数,那么把(3n+1)砍掉一半。这样一直反复砍下去,最后一定在某一步得到 n=1。卡拉兹在 1950 年的世界数学家大会上公布了这个猜想,传说当时耶鲁大学师生齐动员,拼命想证明这个貌似很傻很天真的命题,结 ...

浏览器存储

随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需,... ...

原生js制作表单验证,基本的表单验证方法

表单验证是web前端最常见的功能之一,也属于前端开发的基本功。自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解。 基本的表单验证包括如:字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证,密码验证等。 现在就来完成这些验证代码的编写,先来看字母 ...

123···129>