Javascript

分类下相关文章

jQuery 实现点击按钮缓慢地滑向页内目标锚点

默认的页内跳转效果太突兀,感觉还是慢慢地滑动比较直观,容易理解 $('.btn').click(function(e){ e.preventDefault(); var jumpId = $(this).attr('href'); $('body, html').animate({scrollTop: $(jumpId).offset().top}, 'slow'); }); ...

阅读全文...

javascript 将英文标题中每个单词首字母大写

我的英文博客大部分内容来自我中文博客的翻译,为了节省时间,我想将翻译好的英文博客标题自动格式化,即,英文标题中每个单词首字母转换为大写。 javascript 实现代码: function format_en_title(title) { var words = title.trim().toLowerCase().split(' '); var ignore_words = ["of", "to", "the", "in"]; for (var i = 0; i < words.l ...

阅读全文...

Google 分析实现跨域名统计

有些场景下,需要将多个不同的域名放到同一个 Google 分析的媒体资源下,这样所有流量就能在统一的视图下查看。举个例子: 推广/引流类的网站域名是 www.a.com 及 www.b.com 在线下单购买的网站域名是 www.c.com 用户可能先搜索到了 www.a.com 里的内容,然后产生了购买欲望,然后跳转到 www.c.com 进行下单。要监控 a.com 到 c.com 的访问路径,及转化率,就需要将这三个域名放到一个媒体资源下。 示例代码 <!-- Global site tag (gtag.js) - Google Analytics --> <scri ...

阅读全文...

百度统计事件分析对出站链接进行统计

我有一些对出站链接点击情况进行统计的需求,例如: 阿里云大使链接的访问量。 京东联盟返利链接的点击情况。 这些都需要统计页面的 URL,及点击量。我好根据统计数据来判断具体页面的转化率是否符合预期。 之前只用过百度统计的自定义上报功能,但是不知道如何跟踪出站链接。 百度统计官方文档中的例子 https://tongji.baidu.com/web/help/article?id=236&type=0 对当前页面的客户端下载链接进行点击事件统计,具体示例代码如下: <a id="download" onclick="_hmt.push(['_tra ...

阅读全文...

360 度展示产品 js 实现

图片放哪里 放服务器上的话,太占项目仓库空间。还是放到阿里云 OSS CDN 里吧。 这样就需要使用文件列表。需要注意的是,即使使用 data-image-list,也依然需要指定 data-folder。 data-folder="https://scaleflex.airstore.io/demo/360-car/" data-image-list='[ "iris-1.jpeg", "iris-4.jpeg", "https://scaleflex.airstore.io/demo/360-car/i ...

阅读全文...

百度编辑器 UEditor 设置支持上传的图片格式

今天在网站管理后台使用百度编辑器 UEditor 上传图片时,发现不支持 .jpeg 格式的图片,上传之后,提升“文件格式不支持”。 感觉应该是百度编辑器的配置问题,于是搜索了一下 imageAllowFiles,在 config.json 文件中找到配置。 增加 .jpeg 即可。 "imageAllowFiles": [".png",".jpg",".gif",".jpeg"], /* 上传图片格式显示 */ ...

阅读全文...

百度编辑器 UEditor 限制高度

文章内容太长的情况下,如果不限制编辑器的高度,会导致要下拉很久才能点击到保存按钮。 如果可以设置编辑器的高度,即使文章再长,也可以在编辑器内部下拉滚动条,而不会影响网页的高度。 百度编辑器 UEditor 的设置方法: var ue = UE.getEditor('container'); ue.ready(function() { this.setContent('xxx'); this.setHeight(500); }) ...

阅读全文...

使用 JS 修改提交按钮的处理状态

代码 $('#email_submit').prop('disabled', true); $('#email_submit').attr('style', 'background: grey !important'); $('*').css('cursor', 'progress'); $('#email_submit').prop('disabled', false); $('#email_submit').attr('style', 'background: #e40013 !important'); $('*').css('cursor', 'default'); 修改鼠标样式为“ ...

阅读全文...

Uncaught SyntaxError: await is only valid in async function

在使用 sweet alert 组件时,遇到一个错误提示: Uncaught SyntaxError: await is only valid in async function function edit_dis_top(user_id) { const {value: formValues} = await Swal.fire({ title: '设置推荐人', // ... }) if (formValues) { Swal.fire(JSON.stringify(formValues)) } } 这让我想起了 C# 的 awa ...

阅读全文...

使用 Babel 将 ES6 转成 ES5 代码

Laravel 内置的 Mix 太过臃肿了,我本身又非常反感 JS NPM 这种低质量代码的包管理方式,所以能少一点 JS 依赖就尽量少一点。所以,我直接抛弃了 Laravel Mix。而且,Laravel Mix 在 Windows WSL 中非常不稳定,安装都会报错,问题颇多,并不想研究。 最终,我决定使用简单的 Babel 替换掉 Laravel Mix,因为我实际上只需要 ES6 转成 ES5 这一个功能。 Babel 的文档写的真好 解释了 ES 2015 有哪些新特性 Babel 的配置文件 可以在三个地方配置 Babel babel.config.js .babelrc p ...

阅读全文...

使用 fetch 替代 ajax

前一段时间看到条消息 bootstrap 5 将移除对 jquery 的依赖。例如: 用 querySelectorAll 来查询 DOM 节点 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR) 使用代理事件来进行事件处理 为一些尚未实现的 DOM 标准写了 polyfill 更多地使用自定义元素 (CustomElement) 我完全理解 bootstrap 这样做的初衷,因为写一个简单的小功能,例如调用服务端接口,就需要引入庞大的 jquery 依赖,实际上是非常不合理的。 所以,我决定在新项目中都采用相同的做法,使用 fetch 替代 ajax。 fetch 如何替 ...

阅读全文...

innerHTML, innerText, TextContent 的区别

测试用的 HTML 代码 <div class="quoteText"> “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” <br> ― <span class="authorOrTitle"> Albert Einstein </span> </div> innerHTML document.querySelect ...

阅读全文...

返璞归真:使用纯粹的 javascript 替换掉 jQuery

为何要替换掉 jQuery 一个简单的 element 选择,为何要引入一个 jQuery 依赖? 我想尝试一下摆脱 jQuery 的依赖 Vuejs 中使用 jQuery 总感觉怪怪的 为何 jQuery 可以被替换掉 使用 jQuery 有一个很大的历史原因,那个年代,多种浏览器需要兼容,而 jQuery 是兼容的最好的。例如,ie6 很多功能函数跟 firefox / chrome 不一致,一行 js 代码就需要不得不多写几行来做兼容。用 jQuery 确实省心。 但是,时代不同了。目前手机浏览器完全没有 ie 的包袱,并且桌面平台 ie8 以下的用户凤毛麟角,甚至可以完全忽略不计。 ...

阅读全文...

javascript 正则提取页面中的变量值

有的网页为了防止 tampermonkey 这类插件读取页面中的 js 变量,把变量写到了匿名自调用函数 self-invocation 中,例如 <script type="text/javascript"> (function() { var a = 1; console.log(a); })(); </script> 而我为了某些不可告人的目的必须读取到变量 a 的值。 一种有效的方式是,使用 ajax 获取当前页面的源代码,然后正则匹配中某个指定变量的值。 正则匹配 var s = 'var name = "hahahah ...

阅读全文...

JQuery 自动勾选 checkbox, 并触发提交

正在用 tampermonkey 写一个网站自动答题的程序。 网站题目的大致结构是 <input type="radio" name="qa" value="A"> <input type="radio" name="qa" value="B"> <a href="javascript:" class="submit-answer">提交答案</a> $('.submit-answer' ...

阅读全文...