分类：JS

2020
12-14

使用js获取身份证年龄的示例代码

/**根据身份证号码判断性别15位身份证号码：第7、8位为出生年份(两位数)，第9、10位为出生月份，第11、12位代表出生日18位身份证号码：第7、8、9、10位为出生年份(四位数)，第11、第12位为出生月份，第13、14位代表出生日期，第17位代表性别，奇数为男，偶数为女。*///根据身份证号获取年龄GetAge(identityCard){letlen=(identityCard+"").length;letstrBirthday="";if(len==18){//处理18位的身份证... 继续阅读 >
2020
12-10

js实现弹幕墙效果

本文实例为大家分享了js实现弹幕墙效果的具体代码，供大家参考，具体内容如下1.首先要考虑弹幕墙需要什么：一面墙，输入框，发射按钮，关闭和开启弹幕按钮，在此关闭和开启设置为同一个按钮；2.其次弹幕上墙以后需要移动，从墙的最右边移动到最左边，当移动到最左边时，这条弹幕就要消失；3.初步的想法应该就是当在输入框输入你要发送的内容，点击发送按钮，在墙上会新建一个div来包含这条弹幕内容，再给这个div相应的移动动画clas... 继续阅读 >
2020
12-10

javascript实现放大镜功能

javascript实现放大镜功能 本文实例为大家分享了javascript实现放大镜功能的具体代码，供大家参考，具体内容如下描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置,使放大镜的移动方向与大图的水平和垂直方向相反如何设计页面元素技术要点：事件捕捉和定位难点：计算涉及技术onmouseover：当鼠标指针移动到指定的对象上时发生onmouseout：鼠标指针移出指定对象时发生onmousemove：鼠标指针移动时发生offsetLeft|offsetTop|off... 继续阅读 >
2020
12-10

Javascript实现单选框效果

Javascript实现单选框效果 本文实例为大家分享了Javascript实现单选框效果的具体代码，供大家参考，具体内容如下描述:点击每一个li将li的内容赋值给div给当前点击的li加上背景色,点击空白部分隐藏技术要点:1.事件委托事件委托:事件代理,将子节点要做的事情交给父元素来做原理:将原来要给子元素添加的事件,加给父元素,事件中通过target||srcElement找到对应的子节点,子节点处理具体的操作优点:避免使用for后续加进来的元素也有同样的事件处... 继续阅读 >
2020
12-10

javascript实现移动端轮播图

javascript实现移动端轮播图 本文实例为大家分享了js实现移动端轮播图的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="yidong.css"></head><body><!--页头--><buttonclass="open">打开app</button><divstyle="display:flex;justify-content:center;backgroun... 继续阅读 >
2020
12-10

JavaScript实现弹出窗口效果

本文实例为大家分享了JavaScript实现弹出窗口的具体代码，供大家参考，具体内容如下思路1、总体使用两个div，一个作为底层展示，一个做为弹出窗口；2、两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局；3、在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭... 继续阅读 >
2020
12-10

JS常用跨域方法实现原理解析

JS常用跨域方法实现原理解析 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以使用以下几种方法：通过jsonp跨域在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面... 继续阅读 >
2020
12-10

Js实现粘贴上传图片的原理及示例

我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？原理分析：复制=>粘贴=>上传在这个操作过程中，我们需要做的就是：监听粘贴事件=>获取剪贴板里的内容=>发请求上传需要明白的是：我们只能上传截图工具截的图片(qq截图、微信截图等)，不能粘贴上传系统里的图片(从桌面上、硬盘里复制)，因为他们是存在完全不同的地方。知... 继续阅读 >
2020
12-10

JavaScript实现表单验证功能

本文实例为大家分享了JavaScript实现表单验证功能的具体代码，供大家参考，具体内容如下以下是JavaScript的表单验证功能，可根据JS代码编写出你想要的HTML和CSS的代码。关于正则表达式的使用，以及常用的正则表达式，笔者目前还在整理中，后期整理完成后，会将链接放在下面，供大家一起学习。//1.声明变量varemailObj;varusernameObj;varpasswordObj;varconfirmObj;varemailMsg;varusernameMsg;varpasswordMsg;varconfirmM... 继续阅读 >
2020
12-07

js调用网络摄像头的方法

不支持IE浏览器(需要使用flash插件),支持移动端,未经过完全测试PC端使用的时候,HTML页面需要预留video标签,canvas标签移动端使用的时候,HTML页面需要预留file标签,canvas标签,img标签(function(window,document){window.camera={init:function(options){/***options属性示例*videoID:video控件ID*canvasID:canvas控件ID*fileID:type为file的input控件的ID*... 继续阅读 >
2020
12-05

js实现复制粘贴的两种方法

本文实例为大家分享了js实现复制粘贴的具体代码，供大家参考，具体内容如下一、前沿界面需要复制功能，所以就写了一个作为简单记录二、方法、推荐第二种。1、第一种方法1）、通过document.execCommand('copy')2）、前端代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>constructor-nodelist</title><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="styleshee... 继续阅读 >
2020
12-05

三剑客：offset、client和scroll还傻傻分不清？

在学习前端的过程中，我们经常会碰到offset,client与scroll，所以我就把它们称作为‘三剑客'。01 offset-偏移量定义：元素在屏幕上占用的所有的可见的空间。元素可见的大小由其高度、宽度决定，包括所有内边距，滚动条和边框大小四个属性offsetcss的样式：<style>.son{width:100px;height:100px;padding:10px;border:10pxsolid#ccc;}.father{width:140px;height:140px;padding:10px;borde... 继续阅读 >
2020
12-05

简单谈谈offsetleft、offsetTop和offsetParent

ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素，如果没有父元素或者是父元素中没有一个是定位过的，返回值就是body元素ele.offsetLeft和ele.offsetTop取值问题，分多种情况：如果ele是body的直接子元素，返回值则是ele距离body左侧或顶部的距离如果ele不是body的直接子元素，在父元素进行定位(relative,absolute)的情况下，各浏览器返回值都是ele距离父元素左侧或者是顶部的距离（唯一的... 继续阅读 >
2020
12-04

原生JS实现拖拽效果

原生JS实现拖拽效果 本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下想要让整个元素移动需要三个事件：鼠标按下onmousedown鼠标移动onmousemove鼠标抬起onmouseuphtml<divid="login"class="login"><!--点击title拖拽--><divid="title"class="login-title">登录会员<!--titleend--><span><aid="closeBtn"href="javascript:void(0);"class="close-login">关闭</a></span></div><divclass="login-in... 继续阅读 >