javascript
枫雨血痕
初阶农民工,欢迎各位大佬互相探讨IT技术心得体会。
展开
-
CodeMirror显示格式化json
需求后台数据是SpringMVC传递过来的JSON数据,前台是一个代码编辑器CodeMirror。要把后台传递的json数据格式化后显示在代码编辑器中。解决办法把后台传递的json对象使用js方法JSON.stringify()转为字符串使用JSON.parse()把json字符串转为Javascript对象再使用JSON.stringify()得到格式化后的json字符串然后把第三...原创 2020-04-09 15:38:43 · 8908 阅读 · 0 评论 -
小技巧之验证文件格式
效果:选择文件后,得到文件格式并验证是否选择正确关键知识:onchange事件,字符串常用方法substr(),lastIndexOf()具体代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证文件格式&原创 2018-08-29 20:38:55 · 542 阅读 · 0 评论 -
网页特效之手风琴
效果:使用动画,当鼠标经过某张图片,该图片(容器)宽度变大显示,其他图片宽度缩小显示。关键知识:动画基本原理:盒子目标位置 = 盒子本身位置 + 步长具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴效原创 2018-08-29 20:31:39 · 1313 阅读 · 0 评论 -
JavaScript之动画原理
动画的基本原理:盒子目标位置 = 盒子当前位置 + 步长关键知识:定时器具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画基本原理</title> <s原创 2018-08-31 20:34:12 · 1365 阅读 · 0 评论 -
案例之页面侧边广告跟随
效果:页面有滚动条,当移动滚动条时,保持广告在页面左(右)侧位置不变思路:当window触发onscroll事件时,使用定时器使广告跟随移动关键知识:onscroll,setInterval具体代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...原创 2018-08-19 22:41:50 · 1620 阅读 · 0 评论 -
案例之小火箭返回顶部
效果:页面文档有滚动条,当移动滚轮时,右下角显示小火箭,点击小火箭可返回顶部思路:当window触发onscroll事件时,得到scrollTop值作为减速运动初始值;当小火箭触发onclick事件时,做减速运动返回顶部关键知识:onscroll,setInterval,scrollTo具体代码: <!DOCTYPE html><html><head...原创 2018-08-19 22:35:12 · 1886 阅读 · 0 评论 -
网页特效之点击跟随鼠标
效果:点击网页上随机一个点,图片中心移动到该点思路:使用onclick事件,对于鼠标在页面点击的点,通过clientX/clientY和offsetWidth/offssetHeight属性得到坐标,然后使用定时器使图片减速移动到该坐标。关键知识: 事件对象event,offsetWidth,offsetHeight具体代码: <!DOCTYPE html><ht...原创 2018-08-16 21:56:49 · 2635 阅读 · 2 评论 -
网页特效之进度条
效果:按住鼠标可以拖动进度条,鼠标弹起则不做任何效果思路:布局:大盒子scroll里有三个div,第一个是启动盒子(bar),第二个是填充(显示进度)盒子,对这两个盒子使用绝对定位让其left可改变js:对bar盒子使用onmousedown事件,通过计算得到鼠标按下点相对网页左侧距离,然后对document使用onmousemove事件,通过计算得到移动时鼠标位置相对scroll的距离,然...原创 2018-08-16 21:54:34 · 332 阅读 · 0 评论 -
scroll家族之scrollTop
scrollTop 被卷去的头部(它就是当你滑动滚轮浏览网页时网页隐藏在屏幕上方的距离)如何得到scrollTop:DTD:即html文件开头的<!DOCTYPE html>未声明DTD:document.body.scrollTop;//edge,chrome,firefoxdocument.documentElement.scrollTop;//仅ie支持...原创 2018-08-18 22:20:51 · 201 阅读 · 0 评论 -
网页特效之轮播图
第一步:静态布局轮播图组成部分:图片,底部圆点,左右箭头思路:整体容器为box盒子,用ul包含七张图片(注意ul宽度需略大于等于七张图片总宽度,第一张和第七张用于替换),使用浮动横向排列;使用定位布局底部圆点和左右箭头具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2018-09-01 10:30:05 · 2437 阅读 · 0 评论 -
网页特效之下拉菜单
思路:通过:hover伪类或onmouseenter事件在鼠标经过时改变二级菜单的display关键知识::hover伪类/onmouseenter1.纯静态版具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2018-09-04 21:58:00 · 5112 阅读 · 0 评论 -
node小案例之命令行登录验证
实现效果:在命令行环境中,执行js文件后,输入用户名,并验证用户名是否存在,存在则继续验证密码,不存在则重新输入用户名;验证密码正确输出登录成功,错误则重新输入。js文件代码:// 用户数据var user = { 'admin': '111', 'user1': '222', 'user3': '333'};// 输出第一个问题process.stdout.wri...原创 2019-01-30 18:42:12 · 574 阅读 · 0 评论 -
Atom出现ES6语法警告
在Atom中写js时,出现ES6语法警告如:XXX is only available in ES6 (use ‘esversion: 6’)解决办法:在文件开头加/*jshint esversion: 6 */即可原创 2018-12-21 15:37:14 · 904 阅读 · 1 评论 -
nvm安装及node安装
安装nvm(Node版本管理工具)下载:nvm-windows解压在一个文件夹中点击nvm-setup.exe选择安装选择一个全英文文件夹作为nvm安装的路径(如D:\nvm;该操作在安装途中操作)选择存放当前node版本的快捷方式(如D:\nodejs)安装完成验证环境变量是否配置成功使用cmd打开命令行使用set Path查看路径中是否有安装途...原创 2018-12-20 17:28:58 · 636 阅读 · 0 评论 -
ajax之仿百度智能搜索
在使用搜索引擎时,我们常常在输入框输入时下方出现相关推荐词,这是通过ajax异步请求实现的。实现思路:通过得到输入输入框的值,然后使用百度的智能搜索接口发送ajax请求,得到返回的数据,并使用列表展现关键知识:ajax,jsonp,keyup事件具体代码:<!DOCTYPE html><html lang="en"><head> <...原创 2018-11-13 14:12:27 · 567 阅读 · 0 评论 -
javascript之字符串
常用的字符串方法:1)把其他类型的数据转换为字符串法1:使用"";法2:使用String()法3:使用toString(基数);基数就是进制实例:var num = 15;console.log(typeof (num+''));//stringconsole.log(typeof String(num));//stringconsole.log(typeof num.toS...原创 2018-11-10 10:46:55 · 238 阅读 · 0 评论 -
事件冒泡、事件捕获、事件委托
事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).即事件由最深的节点逐级向父级触发。如例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Event原创 2018-10-18 15:19:55 · 252 阅读 · 0 评论 -
网页特效之旋转轮播图
思路:使用动画的形式,改变图片容器(定位元素)的width,top,left,opacity,z-index,达到立体效果。关键知识:用数组形式存储json数据,数组方法pop()、unshift()、push()、shift()具体代码:html文件:<!DOCTYPE html><html lang="en"><head> <m...原创 2018-09-18 09:44:26 · 852 阅读 · 0 评论 -
网页特效之轮播图2
网页特效之轮播图是以包含所有图片的盒子移动达到轮播效果,而该案例中是以包含单张图片的容器移动达到轮播目的。主要思路:开始时,第一张图片显示,其他图片用定位放置在显示右侧,然后使用定时器轮播时当前显示图片左移显示区域左侧,右侧的图片中的一张左移到显示区域。第一步:静态布局在这个大盒子box下,分slide(图片显示区)和slider-ctrl(各种点击按键)盒子。然后在slide盒子下,给两...原创 2018-09-16 11:21:14 · 334 阅读 · 0 评论 -
网页特效之屏幕滑动
效果:点击任意一个li选项,滑动到相对应的屏幕页面思路:布局:对于每个li铺满整个浏览器可视区域,必须让其父级宽高都为100%;js: 使用for循环,对每一个li(属于ol盒子)点击时,使用定时器和window.scrollTo()方法实现内容滑动一个屏幕;关键知识:index索引号的使用,定时器setInterval,scrollTo()具体代码: <!DOCTYPE ...原创 2018-08-18 22:15:00 · 1424 阅读 · 0 评论 -
网页特效之固定导航栏
效果:当页面产生滚动时,导航栏固定在浏览器可视区域顶部思路:首先得到导航栏的offsetTop或导航栏上面区域的整体盒子的offsetHeight,然后与页面的滚动距离scrollTop比较,大于则固定,小于则取消固定。关键知识:scrollTop,onscroll事件具体代码:<!DOCTYPE html><html lang="en"><head&...原创 2018-08-18 22:04:22 · 4184 阅读 · 0 评论 -
网页特效之遮罩弹出
在各种网站中,经常遇到点击注册/登录,然后使用遮罩并弹出注册/登录的界面。思路:使用id为mask的盒子作为遮罩盒子,该盒子继承body的宽高,使用半透明黑色背景。使用id为box的盒子作为弹出界面,该盒子还包含一个关闭按钮。当我们点击一下注册按钮时,网页被mask盒子遮盖,并且在页面正中间出现界面box盒子关键点:display: none;和display:block的转换层级z...原创 2018-06-10 17:16:13 · 472 阅读 · 0 评论 -
网页特效之点击隐藏文字+鼠标经过表单
效果:当第一次点击input文本框时,原本默认的文本隐藏,然后可自由输入文本,如果有输入的文本,鼠标经过input文本框时,默认全选文本内容,以便删除;点击文本框可取消全选。关键知识:onfocus事件、onblur事件、onmouseover事件、select()方法具体代码:<!DOCTYPE html><html lang="en"><he...原创 2018-06-16 11:21:55 · 532 阅读 · 0 评论 -
网页特效之鼠标展示
效果:每当鼠标移动到该图片,展示该图片的大图效果图:思路:给div的padding-top值和大图高度一样,并以大图做该div背景使用onmouseover事件使鼠标移动到图片上时更换div背景具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-06-15 18:21:07 · 522 阅读 · 0 评论 -
小技巧之全选和反选
思路:使用for循环遍历input选项框,然后使用input的复选框的checded属性实现选中和取消。关键知识:for循环、input复选框具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选和反选&l原创 2018-06-21 20:02:04 · 343 阅读 · 0 评论 -
getElementById、getElementsByTagName、getElementsByClassName复合使用浅析
最近遇到一个关于查找元素的问题,有的时候单独使用getElementById、getElementsByTagName、getElementsByClassName并不足以找到需要的元素,于是我就查找并检测了其复合使用的情况于此记录,以便日后自己使用。<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2018-06-20 19:37:59 · 2376 阅读 · 0 评论 -
js作用域
js中作用域有全局作用域,函数作用域,还有块级作用域(很少,一般认为没有);什么是作用域?一套设计良好的可以用来存储变量的规则称之为作用域。(来自《你不知道的js》)我通俗认为,就是一个作用范围的意思全局作用域:最顶层的作用域,全局变量和全局中声明的函数都在该作用域。例:var a;//声明全局变量function b(){};//全局中的函数原创 2017-12-07 19:01:59 · 190 阅读 · 0 评论 -
js闭包和for循环
以下解释均为个人理解,有错误之处的话欢迎提出,能给出建议的话万分感激!在闭包中,for循环是一个经典实例。例1:for(var i=1;i setTimeout(function timer(){ document.write(i); },1000);}//输出5个6解释:本意是想通过循环输出12345,但是因为js中for循环没有块级作用域,原创 2017-12-09 19:56:24 · 1819 阅读 · 0 评论 -
js闭包浅记
以下解释均为个人理解,有错误之处的话欢迎提出,能给出建议的话万分感激!定义:当函数可以记住并访问所在的词法作用域时,就产生了闭包。即使函数是在当前词法作用域之外执行。例1:function foo(){var a=2;function bar(){console.log(a);//2}bar();}foo();解释:例1产生了原创 2017-12-09 19:54:23 · 106 阅读 · 0 评论 -
网页小技巧之星座运势
思路:使用select下拉菜单选择各种不同星座,然后用对应的onchage事件改变对应的星座图片和今日运势和内容详解。关键知识:select元素,onchange事件,定位(用定位实现运势星星颗数的增减)具体代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-07-23 23:22:15 · 749 阅读 · 0 评论 -
网页小技巧之倒计时
思路:利用日期函数Date(),分别得到终点时间和当前时间距离1970.1.1的毫秒数,然后相减,得到相差毫秒数然后利用相差毫秒数去计算月天时分秒。然后使用定时器设定每秒钟执行1次上述行为。(注意使用parseInt()取整)关键知识:日期函数Date(),定时器setInterval()具体代码: <!DOCTYPE html><html lang="en"&g...原创 2018-07-23 23:24:56 · 512 阅读 · 0 评论 -
网页小技巧之垂直滚动条
效果:模仿滚动条思路:布局:以box盒子为主体,content盒子包含内容,scroll盒子为滚动条区域,bar盒子为滚动条,使用定位调整位置js:通过计算得到对于已显示内容的滚动条长度。滚动条做onmousedown事件,通过计算使滚动条移动时内容移动相对应的距离。并使用window.getSelection ? window.getSelection().removeAllRanges(...原创 2018-08-18 21:55:37 · 544 阅读 · 0 评论 -
网页特效之放大镜
效果:当鼠标在小图上方时,在右边显示放大的图片思路:css布局:在大盒子box里,放入两个盒子small(放小图)和big(放大图),并在small里放一个用来显示放大区域的半透明盒子mask;然后利用定位布局mask和big的位置js:使用onmouseover/onmouseout事件显示/隐藏big盒子和mask;使用onmousemove事件设定mask盒子位置和显示big盒子里的放...原创 2018-08-15 21:39:27 · 1744 阅读 · 0 评论 -
网页特效之筋斗云
效果:当鼠标移动到导航栏的一项菜单时,云彩背景跟着移动,鼠标离开则返回第一项菜单;当有点击事件发生时,云彩停留在点击的那项菜单,再次移动到其他项菜单时,鼠标离开返回到上一个发生点击的那项菜单。关键知识:setInterval(),offsetLeft,position定位具体代码:<!DOCTYPE html><html lang="en"><head...原创 2018-08-15 21:36:28 · 707 阅读 · 0 评论 -
网页小技巧之保留小数
此以保留两位小数为例思路:法1:先把数字转换为字符串,使用indexOf()得到小数点在字符串位置,使用slice()或substr()截取字符串;法2:数值乘100后取整除10法3:直接使用方法toFixed();该方法自带四舍五入关键知识:indedOf(),slice(),substr(),parseInt(),toFixed()具体代码:<!DOCTYP...原创 2018-08-14 21:09:05 · 513 阅读 · 0 评论 -
offset家族
offset家族作用:用于得到元素尺寸1.offsetWidth和offsetHeightoffsetWidth: 得到对象的宽度(自己的,与他人无关);offsetWidth=width+border+paddingoffsetHeight: 得到对象的高度(自己的,与他人无关);offsetHeight=height+border+padding注意:style.width...原创 2018-08-14 20:59:37 · 258 阅读 · 0 评论 -
网页小技巧之日历
思路:使用日期函数Date()获得当前的年月日和星期关键知识:日期函数Date()获取日期和时间getDate() 获取日 1-31getDay () 获取星期 0-6 getMonth () 获取月 0-11getFullYear () 获取完...原创 2018-07-21 22:16:07 · 412 阅读 · 0 评论 -
网页特效之tab栏切换
思路:使用排他思想,每当鼠标移动到一个tab选项卡时,清空所有选项卡类名,然后给当前选项卡添加类名,达到使对应的tab内容显示的目的。关键知识:排他思想,for循环中使用自定义索引属性index得到i具体代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title...原创 2018-07-21 22:14:22 · 1439 阅读 · 0 评论 -
网页特效之时钟
思路:首先使用定位功能把时钟、时针、分针、秒针聚合,然后使用日期函数得到当前时间的时分秒和毫秒,然后使用css3属性transform和旋转函数rotate()改变角度,达到使针转动的目的。关键知识:position定位,日期函数Date()获得当前时分秒的使用,transform属性具体代码:<!DOCTYPE html><html lang="en">&...原创 2018-07-24 22:17:19 · 792 阅读 · 0 评论 -
javascript中的with()方法
with()方法with方法用于多次使用对象属性时,可简化多次编写同一对象的工作;例://js代码var aa = document.createElement('div');//创建一个div赋给aa;with(aa){style.width = '400px';style.background = 'red';innerHTML = 'hahaha';}原创 2017-11-30 15:33:14 · 417 阅读 · 0 评论