随笔分类 - JavaScript 练习&demo
摘要：(function() { document.addEventListener('copy',(e)=>{ e.preventDefault(); e.stopPropagation(); e.clipboardData.setData("text", "财富池温馨提示，请登录后再操作！"); co
阅读全文
摘要：html 片段： <div class="cover" style="position: fixed;"> <div class="cover-img imageFullScreen"> <img src="" alt="" class="coverImg"> <div class="cover-c
阅读全文
摘要：<p class="" id="c_nowTime">加载中~</p> setInterval(() => { var timespan = document.querySelectorAll('#c_nowTime'); var now = new Date(); var nh = now.get
阅读全文
摘要：第一步：禁止鼠标右键另存为。 $('#videoArea').bind('contextmenu',function() { return false; }); //这是jq 代码。js 自己写 第二步：配置video 属性 controlslist="nodownload" 一般这时候还是不靠谱，
阅读全文
摘要：layui 时间选择器，每次都是绑定对应的 类 动态创建，有时候创建多个，我们不可能每个时间选择器，都声明一次。 所以，直接遍历声明出来即可。 <div class="layui-inline"> <input type="text" class="ctime layui-input" readon
阅读全文
摘要：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：JS 调用浏览器 复制功能 <textarea class="copy_link" maxlength="200" readonly>{$val.url}</textarea> <button class="btn copy_btn btn-xs btn-primary" type="button"
阅读全文
摘要：$('.c_showFile').on('change',function(){ var c_showImg =this.files[0]; getObjectURL(c_showImg); }) function getObjectURL(file) { var url = null; if(wi
阅读全文
摘要：math.js 使用解决 js 精度计算问题。 以上demo 只为记忆，仅供参考。具体可以查看 https://mathjs.org/ 官网
阅读全文
摘要：原理就是用setTimeout 方法，很久之前写的代码了, 今天发现了，上传上来保存下。 效果是两个方块在一条直线上进行互相追击，速度快的碰撞到速度慢的就会减速，而被碰撞的就会加速。二者互相追击，碰撞。 您可以点击 这里查看demo
阅读全文
摘要：引言：在上一篇拖拽（原来这样可以实现鼠标拖拽） 中我们已经了解了拖拽的制作原理，这次在上面的基础上，用拖拽模仿音量控制条效果。制作成功后效果图： 直接上代码： 注意，这里与上一篇拖拽demo 实现的不同的是，在这我用了 offsetLeft ,而不是getBoundingClientRect() ，
阅读全文
摘要：引言：最近在弄一个Vue的入门学习用项目，期间有用到 JavaScript 将中文转成拼音这个功能，这可真是为难人。想到了编码，但是没搞明白怎么将编码和拼音字母啥的联系起来。后来上网查询了才知道。声母韵母搭配的拼音（早就忘记声母韵母了）和中文可以对应起来， 比如： 啊的Unicode编码是 u554
阅读全文
摘要：引言： 上次弄了图片放大镜效果（图片放大镜原来是这么回事），当时用到了clientX clientY 后来查询了一下这两个属性，发现居原来还可以用来做简单的拖拽。实现原理与放大镜那里一样，改变left 与top 的数值让 div 移动。 ps： demo 演示平台又挂了，暂时不能演示demo 效果。
阅读全文
摘要：引言：一直好奇怎么实现图片放大，之前使用过 css动画 放大缩放，今天了解了下如何用 JavaScript 实现的图片放大。直接上效果图： （效果图如上） 实现原理还是很容易理解的，在布局上可以看到有是是三个区域，左边原图区，以及取图区，右边的展示区，我使用了 relative 与 absolute
阅读全文
摘要：引言：最近在看一些轮播图的制作，各类轮播图真的是很有创意。咳咳，想起曾经自己做的轮播图，真是简单到拿不出手。不多说，直接show code 看看进度条的轮播图的制作思路，让我们分析学习这个带进度条的轮播图制作： 效果：下面的小图之下的进度条走完，上面的大图切换，当点击下面的小图时大图也切换到相应的小
阅读全文
摘要：不定时的更新，这一次采用JavaScript 模仿下载进度条效果。原理：两个div嵌套，里面的宽度0，外部自己随便定义，采用 setInterval() 函数增加 里面的div 的 width的值，使其背景色慢慢平铺开来，同时增加一个计数值“index” 表示进度。采用 直接show code: 您
阅读全文
摘要：今天在网上看到一道题，觉得很有意思就把它抄下来解了。题目是这样的： 下面让我们来跟着运行结果分析代码： 第一： parent.show();//1 [ 1, 2, 1 ] 5 ：调用自己的方法，自己的属性，这个就比较简单了。 就不多说。 第二： child1.show();//11 [ 1, 2,
阅读全文
摘要：实现一个简单的时间： <body> <div id="time" style="color=red"> </div> <script> var time=document.getElementById("time"); setInterval("time.innerHTML=new Date().t
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>覆盖显示图片</title> </head> <style> #outer { width: 100%; height: 100%; } .overlay { //这个style是通
阅读全文
浙公网安备 33010602011771号