![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
在线小白www
这个作者很懒,什么都没留下…
展开
-
js监听窗口关闭
其实是触发了,应该只是没有弹窗而已。该方法基本适用于所有浏览器。1. 关闭页面没有提示信息。转载 2022-10-13 18:05:33 · 4843 阅读 · 0 评论 -
特效三 - - 图片分裂
代码】特效三 - - 图片分裂。原创 2022-08-03 16:43:18 · 178 阅读 · 0 评论 -
特效二 - - 倒计数数字旋转特效
代码】倒计数数字旋转特效。原创 2022-08-03 11:49:42 · 131 阅读 · 0 评论 -
js随机生成大、小写字母
代码】js随机生成大、小写字母。转载 2022-08-02 15:10:33 · 926 阅读 · 0 评论 -
特效一 - - js实现文字一个一个显示
代码】js实现文字一个一个显示。原创 2022-08-02 11:13:30 · 1608 阅读 · 0 评论 -
限制上传图片的宽高
js上传图片原创 2022-07-27 15:45:26 · 338 阅读 · 0 评论 -
js拼接html时,onclick传参问题
3.使用JSON.stringify()将对象转换成json字符串,但是依然会报错unexpectedendofinput,该错误是因为json字符串的双引号和onclick的双引号冲突,需要将json字符串转成单引号字符串。如果直接使用对象,页面渲染的时候,onclick的参数为([onjectObject])。对象是不能拼接的,拼接的必须是字符串,因此需要将对象转变为字符串。1.将对象拆开,只穿需要传递的参数(参考第二点,需要转义)...转载 2022-07-20 16:40:24 · 1763 阅读 · 1 评论 -
关于onbeforeunload
转载:巨坑!监听浏览器窗口关闭onbeforeunload不起作用(脱坑了啊!!)_朝阳群众Jone的博客-CSDN博客_window.onbeforeunload不起作用转载 2022-07-12 16:34:54 · 138 阅读 · 0 评论 -
FormData用法详解
转载:FormData用法详解_zqian1994的博客-CSDN博客_formdata转载 2022-07-05 14:34:13 · 162 阅读 · 0 评论 -
vscode设置自定义HTML模板
2. 搜索html.json原创 2022-06-13 11:05:38 · 688 阅读 · 0 评论 -
关于clipboard.js 的使用,完成文本的复制
clipboard.js 主要用来对节点内的文本完成复制。支持原生js的调用虽然是用的原生js,但是类名传递依然可以使用“.btn”这种方式,id名同理。问题:1. 点击多次时,复制功能重复调用多次 这是因为调用后没有销毁实例,需要再调用clipboard.destory()销毁实例2. vue首次点击时需要点击两次才能复制成功 在vue中使用clipboard.js,需要点击两次才能复制成功的问题_MilkyMoon的博客-CSDN博客......原创 2022-06-08 18:36:28 · 836 阅读 · 0 评论 -
script标签中的async和defer
转载:图解 script 标签中的 async 和 defer 属性 - 掘金在html页面中通常会出现以下几种script,那他们有什么区别呢?<script scr='......'></script><script scr='......' async></script><script scr='......' defer></script>1. script浏览器在解析html的时候,如果遇到一个没有任何属转载 2022-05-26 11:21:00 · 315 阅读 · 0 评论 -
js去除字符的引号,使其变为变量,并赋值调用
eval()函数let a_1='aa'function test(data){ console.log(`${data}_1`) //aa_1 console.log(eval(`${data}_1`)) //aa}test(a)原创 2022-05-23 15:43:33 · 405 阅读 · 0 评论 -
js生成随机id
转载:JS生成唯一id方式介绍(UUID和NanoID) - 曲琦 - 博客园前言之前代码中前端生成唯一的id方式,一般采用uuid的方式,最近唯一id有了更好的方式,那就是NanoID,今天这篇文章记录一下NanoID 正在取代 UUID?及js 生成uuid及NanoID的方法。为什么 NanoID 正在取代 UUID1、更安全在大多数随机生成器中,它们使用不安全的 Math.random()。但是,NanoID 使用 crypto module 和 Web Crypto API,意转载 2022-05-12 10:51:23 · 7118 阅读 · 0 评论 -
http请求https报错:Mixed Content: The page at ‘xxx‘ was loaded over HTTPS, but requested an insecure...
当我们的浏览器出现类似“was loaded over HTTPS, but requested an insecure resource/frame”这种错误是,一般都是因为我们的网站是HTTPS的,而对方的链接是HTTP协议的,因此在Ajax或者javascript请求时,就会报如下这种错误:具体错误类似如下:Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource '转载 2022-05-11 18:31:26 · 6115 阅读 · 2 评论 -
js保存图片--html2canvas
工作原理html2canvas库的工作原理并不是真正的“截图”,而是读取网页上的目标DOM节点的信息来绘制canvas,所以它并不支持所有的css属性(参考地址)下载地址Releases · niklasvh/html2canvas · GitHubScreenshots with JavaScript. Contribute to niklasvh/html2canvas development by creating an account on GitHub.https://github..转载 2022-05-10 17:05:57 · 434 阅读 · 0 评论 -
js获取设备类型--移动端、安卓、苹果、pc
// 设备类型 function deviceJudge() { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); //苹果端 return 'ios' } else if (/(Android)/i.test(navigator.userAgent)) { ...转载 2022-05-10 11:32:03 · 1147 阅读 · 0 评论 -
js获取浏览器类型及版本
function browserJudge() { var document = window.document, navigator = window.navigator, agent = navigator.userAgent.toLowerCase(), //IE8+支持.返回浏览器渲染当前文档所用的模式 //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(..转载 2022-05-10 11:29:14 · 1776 阅读 · 1 评论 -
window.location.href
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Aj转载 2022-03-11 11:27:07 · 3930 阅读 · 0 评论 -
js中的null和undefined总结
一、. undefined1. 变量提升,只声明未定义默认值就是undefined2. 严格模式下没有明确的执行主体,this就是undefined3. 对象没有这个属性名,属性值就是undefined4. 函数定义形参不传值,默认就是undefined5. 函数没有返回值(没有return或只有return),默认的返回值就是undefined二、null1. 手动设置变量的值或者对象某个属性值为null(此时不赋值,后边会赋值)2. 在js的DOM元素获取中,如果没转载 2022-02-25 13:43:34 · 554 阅读 · 0 评论 -
点赞特效----背景图
效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&..转载 2022-02-16 16:29:29 · 96 阅读 · 0 评论 -
css实现心形,及点赞特效
转载:点赞按钮居然还能这么玩❤️? - 掘金<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.转载 2022-02-16 10:58:24 · 1199 阅读 · 0 评论 -
检测鼠标上滑还是下滑
$(function () { var scrollFunc = function (e) { e = e || window.event; var t1; var t2; if (e.wheelDelta) {//IE/Opera/Chrome t1 = e.wheelDelta; if (t1 > 0) { console.log("鼠标上划") ..原创 2022-02-10 10:17:45 · 579 阅读 · 0 评论 -
offsetTop坑----获取的是最近有定位属性的父元素的值
一直以为offsetTop返回的是元素距离body顶部的距离,结果在一次使用中发现,并不是!!!望熟知!!!!原创 2022-02-09 16:11:26 · 258 阅读 · 0 评论 -
获取、设置元素的属性值
jqueryvar f1 = $(this).data('id');var f2 = $(this).attr('data-id');jsvar f2 = document.getElementById('fun').dataset.id //原创 2022-02-08 17:08:00 · 587 阅读 · 0 评论 -
vue 获取当前父元素、子元素、兄弟元素 --- $event
<div @click = “clickfun($event)”>点击</div> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子.原创 2022-02-08 10:37:35 · 1038 阅读 · 0 评论 -
vue3-seamless-scroll实现无缝滚动
<script src="./node_modules/vue/dist/vue.global.js"></script> <script src="./node_modules/vue3-seamless-scroll/dist/vue3-seamless-scroll.js"></script> <div class="scroll"> <div>默认配置</div> <vue..原创 2022-02-07 10:29:27 · 932 阅读 · 1 评论 -
js将一位数组分割成每三个一组
var data = [ { name: 'Liming', age: '25' }, { name: 'Liming', age: '25' }, { name: 'Liming', age: '25' }, { name: 'Liming', age: '25' }, { name: 'Liming', age: '25' }, { name: 'Liming', age: '25' }, ...原创 2022-01-21 11:08:57 · 627 阅读 · 0 评论 -
字体图标和精灵图的区别
css雪碧图(精灵图)与字体图标的介绍以及对比_JHCan333的博客-CSDN博客css雪碧图(精灵图)与字体图标的介绍以及对比设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这样的话,就会导致请求数量太多,造成资源浪费,以及访问速度变慢。碰到这样的情况,可以使用两种方式解决这种问题:CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景,需要根据实际需求来做取舍。...https://blog.c转载 2022-01-20 11:47:34 · 134 阅读 · 0 评论 -
关于CDN
引用CDN内容的方法总结 - 高亮uncle - 博客园1.1.1 摘要 CDN相信大家都听说过,甚至使用过相关的技术,也许有些人会回答“没有听说过和使用过该技术”,真的是这样吗? CDN的全称是Content Delivery Network,即内容分发https://www.cnblogs.com/gluncle/p/7109576.html...转载 2022-01-20 11:38:36 · 65 阅读 · 0 评论 -
*.js 和 *.min.js 的区别
*.js是完整的js文件,体积较大,多用于阅读学习源码和修改源码,一般不用于上线项目。*.min.js是由完整版压缩后的js文件,功能与完整版完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删掉,并进行一些优化。这个版本一般用于线上项目使用。文件体积较小,可降低网站流浪,提升访问速度,防止他人窃取js源码。...原创 2022-01-05 11:26:45 · 770 阅读 · 0 评论 -
简单复现鼠标跟随事件 - - - 背景图随鼠标的移动而移动
效果:原理:获取鼠标的相对位移,将获得的相对位移赋值到背景图上 $('.wrap').mousemove(function (e) { var x = (e.offsetX * -1 / 25), y = (e.offsetY * -1 / 25); // $(this).css('background-position', x + 'px ' + y + 'px'); $(this).css('transform', 'translate3d(' +原创 2022-01-04 14:14:18 · 935 阅读 · 0 评论 -
标签中文本内容太长回车换行,导致渲染出现空格问题
问题:标签中的文本太长,放在一行不方便观看,也不美观。随直接对文本内容换行处理,但是因此渲染出来的页面,在换行的地方会出现空格。如下,可以看到产生了空格,如果是在符合位置换行,差别还不是很明显,但如果在文字之间换行,就非常明显。解决:在文本渲染出来,需要换行的位置加上br换行,这样再回车就不会产生空格。可以看到渲染文本已经不存在空格了!...原创 2022-01-04 10:07:03 · 725 阅读 · 0 评论 -
js判断页面是否到达底部
判断标准:窗口的高度 + 滚动条的距离 >= 页面的整体高度1、jswindow.addEventLister("scroll",funciton(){ //窗口高度 var windowHeight = document.documentElement.Height || document.body.height; //滚动高度 var scrollTop = document.documentElement.scrollTop || docu.原创 2021-12-30 10:30:25 · 2983 阅读 · 2 评论 -
js中void 0和undefined的区别
void 0 与 undefined的区别_juzipchy的博客-CSDN博客在看《你不知道的JavaScript》的时候,看到了这个么一段代码.function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; }void 0 返回undefined,我们都知道的,但是为什么不直接...https://blog.csdn.net/juzipchy/article/details/86367565...转载 2021-12-28 11:59:28 · 93 阅读 · 0 评论 -
js中使用void(0)
javascript中void(0);用法及常见问题解析_程晨-CSDN博客_javascript:void转载这篇文章使用过ajax的朋友经常会见到这样的代码:here,这里面的void是一个操作符,该操作符指定要计算一个表达式但是不返回值。javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。提示:在学习一下内容之前,你可以先通过javascript:vo...htt转载 2021-12-28 11:57:08 · 367 阅读 · 0 评论 -
js动态的添加和删除类
用JS添加和删除class类名 - 肖恩不是小羊 - 博客园转载 2021-12-24 16:23:29 · 290 阅读 · 0 评论 -
表达式中的&&,||
转载:javascript中关于&& 和 || 表达式 - Zeroassetsor - 博客园转载 2021-12-23 16:09:09 · 92 阅读 · 0 评论 -
jquery合并两个对象
1. object.assignObject.assign(target,source,souce...)2. $.extend$.extend( target [, object1 ] [, objectN ] )3. lodashlodash.assign(target,source)4. 遍历赋值for (key in source) { // if (source.hasOwnProperty(key)) { // if (source.hasOwnP原创 2021-12-23 11:57:13 · 737 阅读 · 0 评论 -
hover控制同级元素样式
1. 父子关系.a:hover .b{color:red};2. 同级相邻元素.a:hover + .b{color:red};3. 同级不相邻元素.a:hover ~ .b{color:red};ps:1. 同级相邻或者不相邻都可以使用 ~;2. 这里的同级指b标签必须在a的后面,若是前面,则不起效果,使用js控制。...原创 2021-12-23 09:48:01 · 932 阅读 · 0 评论