伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:…
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言.下面是我收集 的10段实用JavaScript代码,基于它们你还可以创造出更强大的JS插件或功能函数. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项…
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库.这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验. function isValidDate(value, userFormat) { // Set default format if format is not…
这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. 其他的代码都收录于github,参考:CodeJS/JS 书中内容 这本书讲述了很多工作中常用的代码段,有一些也是目前网站很流行的技术.比如图片放大镜,导航置顶,广告浮动等等. 也通过这些例子梳理了下javascript的相关内容,主要包括3个方面: 1 ECMAScript核心 2 DOM 3 B…
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库.这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验. function isValidDate(value, userFormat) { // Set default format if format is not…
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="…
发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试” <!doctype html> <html lang="en"> <head> <met…
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 使用的时…
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给它添…
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="…
先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles/reset.css" /> <l…
一般来说,我们需要在开发应用软件的配置文件中,添加一些参数,用于后续用户根据实际情况,自行调整. 配置参数,可以放在配置文件中.环境变量中.或数据库表中(如果使用了数据库的话).通常,配置数据,以 key/value 的形式. 有时候,这种  key/value 的形式,不足以满足用户需求.比如,系统中有个定时删除临时文件的 job ,我们希望在客户工厂的生产交接班期间及员工吃饭时间,比如客户工厂生产交接班时间为 5:30 - 6:00 , 23:00-23:30, 中途吃饭时间为 11:00,…
不知道自己HTML水平如何,不知道HTML5如何进化?看这张图 如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.Doctype? 严格模式与混杂模式,如何触发这两种模式? 2.什么是Semantic HTML(语义HTML)? 3.表格的的语义化可以用哪个标签? 4.<img>标签上title与alt属性的区别是什么? 7.你如何对网站的文件和资源进行优化? 8.在网页中的应该使用奇数还是偶…
在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它. 通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下: <form name="input" action="html_form_action.php" method="post"> <div class="login-item"> <label for="nick&q…
第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>.这个…
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey; //检测Alt event.ctrlKey; //检测Ctrl 17.获取屏幕分辨率的宽.高: window.screen.height; //获取屏幕的高 window.screen.width; //获取屏幕的宽 18.脚本永不出错的方式: window.onerror=function(m…
30段JavaScript代码——上篇 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ alert("这不是 IE 浏览器"): } 2.将日期直接转换为数值:  +new Date(); 3.非IE浏览器下将类数组对象 “arguments”转为数组: Array.prototype.slice.call(arguments); 4.最简单的选择运算符||: var a = 0…
1.打印页面的所有脚本引用文件及代码段: javascript:var scriptarray=document.getElementsByTagName("script");for(scriptindex in scriptarray){console.log(scriptarray[scriptindex])}; 2.解除页面不能选择.拷贝文字: javascript:document.getElementsByTagName("body")[0].onsele…
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 对象,然后在…
DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.createElement('input'); } html代码用JS动态加载进页面 <script type="text/html" id="T-pcList"> //这里面是你要放的html代码,例如放一个div的内容 </script> 把上面的js动…
https://www.html.cn/archives/8748#table-of-contents https://www.haorooms.com/post/js_regexp…
<ul> <li>Picture 1</li> <li>Picture 2</li> <li>Picture 3</li> <li>Picture 4</li> <li>Picture 4</li> </ul> // code snippet 1 $("li").click(function () { console.log($(this).i…
整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload =…
JAVA中执行JavaScript代码并获取返回值 场景描述 实现思路 技术要点 代码实现 测试方法 运行结果 改进空间 场景描述 今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xxxx’” 怎么在java里获得p的值,我想起了以前一个很有意思的场景,我的一位很NB的前同事做了一件很了不起的事,他当时配置acitiviti流程引擎的时候为了做变量控制,把变量控制的条件写成了一个javascript的表达式,大概类似于groupNumber==1&&hasRead&…
昨天我在网课上,看到老师输入#2之后,立马就出现了一堆代码. 我于是赶紧打开自己的visual studio尝试一下,并没有任何反应. 上网查找,发现visual studio有自定义代码段的功能. —————————————————————————————————————————————————————— 一.参考链接 1.创建代码片段 2.代码片段架构参考 二.具体步骤 1.概述 创建自定义代码段包括这几个步骤: 创建一个 XML 文件,填写适当的元素,并向其中添加代码. 将这段代码导入代码…
<超实用的Node.js代码段>连载一:获取Buffer对象字节长度 <超实用的Node.js代码段>连载二:正确拼接Buffer Node.js是一种后起的优秀服务器编程语言,它用来构建和运行Web应用,这和ASP.NET,Ruby on Rails或Spring框架做的工作是类似的.它使用JavaScript作为主要的开发语言,有一个自带的轻量级Web服务器,还有Node包管理(NPM)的大量插件,你就可以按照你自己的需求来塑造Web应用,像添加MVC特性,加入Restful服…
不知道自己Node.JS水平如何?看这张图 如果一半以上的你都不会,必须看这本书,一线工程师用代码和功能页面来告诉你每一个技巧点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.      Node.js框架最适用的应用场景? 2.      Node异步机制的种类? 3.      exports与module.exports的区别? 很简单,但不会回答?如果以上题目你都一知半解,赶紧脑补下<超实用的Node.JS代码段>!!…
<html> <head> <meta name="name" content="content"charset="utf-8"/> <style type="text/css" media="screen"> #main{ width: 800px;height: 300px;margin: 0 auto;position: relative;} #main…
今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论.缩减后的js代码如下,你是否能准确说明他的输出值呢? function DemoFunction(){ this.init = function(){ var func = (function(va){ this.va = va; return function(){ va += this.va; return va; } })(function(va1,…
今 天的帖子会给你们展示50个jQuery代码片段,这些代码能够给你的JavaScript项目提供帮助.其中的一些代码段是从jQuery1.4.2才 开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任 何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1.     如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器…