前端福利！10个短小却超实用的JavaScript 代码段

JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言.下面是我收集的10段实用JavaScript代码,基于它们你还可以创造出更强大的JS插件或功能函数. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项…

超实用的JavaScript代码段 --倒计时效果

现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="…

超实用的JavaScript代码段 Item4 --发送短信验证码

发送短信验证码实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试” <!doctype html> <html lang="en"> <head> <met…

超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

js 对象浅拷贝和深拷贝 1.浅拷贝拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor = { career:'医生' } function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } c.uber = p; return c; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 使用的时…

超实用的JavaScript代码段 Item5 --图片滑动效果实现

先上图鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles/reset.css" /> <l…

超实用的JavaScript代码段 Item2 --伸缩菜单栏

伸缩菜单栏点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:…

超实用的JavaScript代码段 Item1 --倒计时效果

超实用的JavaScript代码段

1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库.这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验. function isValidDate(value, userFormat) { // Set default format if format is not…

《超实用的JavaScript代码段》—— 读后总结

这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. 其他的代码都收录于github,参考:CodeJS/JS 书中内容这本书讲述了很多工作中常用的代码段,有一些也是目前网站很流行的技术.比如图片放大镜,导航置顶,广告浮动等等. 也通过这些例子梳理了下javascript的相关内容,主要包括3个方面: 1 ECMAScript核心 2 DOM 3 B…

超实用的JavaScript代码段 Item3 --图片轮播效果

图片轮播效果图片尺寸统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给它添…

我们为什么要看《超实用的HTML代码段》

不知道自己HTML水平如何,不知道HTML5如何进化?看这张图如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.Doctype? 严格模式与混杂模式,如何触发这两种模式? 2.什么是Semantic HTML(语义HTML)? 3.表格的的语义化可以用哪个标签? 4.<img>标签上title与alt属性的区别是什么? 7.你如何对网站的文件和资源进行优化? 8.在网页中的应该使用奇数还是偶…

《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦

在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它. 通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下: <form name="input" action="html_form_action.php" method="post"> <div class="login-item"> <label for="nick&q…

超实用的HTML代码段（赵荣娇）

第1章创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> <!-- HTML文档中,第一个标签是<html>.这个…

Web前端开发最佳实践（12）：JavaScript代码中有大量写死的配置数据？这些数据难以维护，你需要合理组织这些数据

前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定值,这部分无逻辑的数据可统称为配置数据.一种好的编码实践是把这部分配置数据和业务逻辑分离,这样修改配置数据时就不需要修改业务逻辑代码了,从而提高了代码的可维护性.同时,配置数据的分离,使得业务逻辑代码也可以重用了,不同的配置数据可以对应相同的业务逻辑. 配置数据和逻辑分离那么,要如何把配置数据和代…

超实用的 JavaScript 代码片段（ ES6+ 编写）

Array 数组 Array concatenation (数组拼接) 使用 Array.concat() ,通过在 args 中附加任何数组和/或值来拼接一个数组. const ArrayConcat = (arr, ...args) => [].concat(arr, ...args); // ArrayConcat([1], [1, 2, 3, [4]]) -> [1, 2, 3, [4]] Array difference (数组比较) 根据数组 b 创建一个 Set 对象,然后在…

[总结]web前端常用JavaScript代码段及知识点集锦

DOM相关判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.createElement('input'); } html代码用JS动态加载进页面 <script type="text/html" id="T-pcList"> //这里面是你要放的html代码,例如放一个div的内容 </script> 把上面的js动…

精心收集的 95 个超实用的 JavaScript 代码片段（ ES6+ 编写）

https://www.html.cn/archives/8748#table-of-contents https://www.haorooms.com/post/js_regexp…

前端用户体验优化： JS & CSS 各类效果代码段

前言不定时更新在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/opt... 部分内容仅兼容webkit内核,其他内核自行查询可控密度的虚线分隔线 css .line { height: 1px; width: 100%; transform: scaleY(0.4); -webkit-transform: scaleY(0.4); background-image: linear-gradien…

50个实用的jQuery代码段让你成为更好的Web前端工程师

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.1.如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(…

分享10个超实用的jQuery代码片段

来源:GBin1.com jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢! jQuery平滑回到顶端效果 $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offs…

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以…

转：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用gr…

前端福利：使用Wallpaper Engine让自己的桌面炫酷起来

Wallpaper Engine,是一款Steam上的特别特别炫酷的壁纸定制软件.它可以对你的桌面进行定制,可以使用视频,动画,网页等形式来替换壁纸. 注意到没,关键是可以使用Html格式的文件作为桌面!前端福利啊有木有~ 首先,先先下载软件下来,可以选择到Steam上支持正版,目前售价是18元人民币----Steam页面当然,也可以选择破解版.地址就不贴了,百度一下你就知道. 下载,安装,搞定之后打开软件,在软件下方有两个选项,一个是从文件打开,一个是从网页打开.顾名思义,如果你是本地视频,…

web前端的10个顶级CSS UI开源框架

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计.本文分享了10个顶级的CSS UI开源框架,有几个确实不错,一起来看看. 1.Bootstrap – 最流行的Web前端UI框架 Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的设计师Mark Otto和Jaco…

【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发者.假设你如今还不知道grunt或者听说过.可是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"反复.表示重点). 至于grunt的作用,这里不具体说了.总之你假设做web前端开发,你一定要用grunt.另一点,它全然免费,没有盗版.既强大又免费的东西.为何不用? 当然了,你假设你能找到更好的替代grunt的其它工具…

Web前端开发最佳实践（10）：JavaScript代码不好读，不好维护？你需要改变写代码的习惯

前言这篇文章本应该在上一篇文章:使用更严格的JavaScript编码方式,提高代码质量之前发布,但当时觉得这篇文章太过基础,也就作罢.后来咨询了一些初级的开发者,他们觉得有必要把这篇文章也放上来.尽管这篇文章内容基础,但是很多初中级开发者还是会犯同样的错误,发布出来也算是再一次提醒. 良好的编码习惯,这是每个程序员应具备的最基本素质.无论是前端程序员还是后端程序员,都要遵循基本的规范,减少因代码混乱而造成难以维护的局面.要做到不管有多少人共同参与同一个项目,一定要确保每一行代码都像是同一个人编…

前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http://cherryblog.site/common-CSS-layout.html 2.几种 JavaScript 动画库推荐JavaScript 库对设计师和开发人员来说,都是非常有用的工具.它们可以为你的网站添加一些超级强大的功能,给用户带来更好的体验.http://www.tuicool.com…

Web前端设计:Html强制不换行<nobr>标签用法代码示例

在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 No Break 的缩写,意思是禁止换行.通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>-</nobr>标签里的话,则不会换行.由www.169it.com搜集整理一.nobr语法 1 <nobr>内容</nobr>…

6个超实用的PHP代码片段

一.黑名单过滤 function is_spam($text, $file, $split = ':', $regex = false){ $handle = fopen($file, 'rb'); $contents = fread($handle, filesize($file)); fclose($handle); $lines = explode("n", $contents); $arr = array(); foreach($lines as $line){ list($w…