JavaScript
Agwenbi
星光不问赶路人,时光不负有心人
展开
-
CSS通过设置filter实现元素交融效果
【代码】CSS通过设置filter实现元素交融效果。原创 2023-07-27 14:33:28 · 633 阅读 · 0 评论 -
关于MutationObserver用于监听元素DOM结构变化
【代码】关于MutationObserver用于监听元素DOM结构变化。原创 2023-04-21 16:14:26 · 438 阅读 · 0 评论 -
js解决小数之间相加损失精度的问题
关于js小数之间相加损失精度的问题原创 2022-07-14 14:56:15 · 909 阅读 · 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"> <t原创 2022-02-10 17:07:14 · 2881 阅读 · 0 评论 -
接口请求方式的定义(REST API)
url代表资源,method代表方式json-server的使用项目中安装json-serveryarn add json-server -Dnpm install json-server -D项目根目录下新建__json_server_mock__文件夹(文件夹名自定义),此文件夹下新建db.json文件,写入以下数据{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ],原创 2021-09-22 21:09:36 · 440 阅读 · 0 评论 -
H5在移动端上禁止缩放
const disableZoom = () => {//禁止缩放 let lastTouchEnd = 0; document.documentElement.addEventListener('touchend', (event) => {//禁止双击放大 var now = Date.now(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; .原创 2021-04-09 13:56:38 · 371 阅读 · 1 评论 -
原生JS动画框架使用案例
1、index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同时运动</title></head><style> *原创 2020-11-10 11:02:54 · 158 阅读 · 0 评论 -
原生JS透明度动画案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度动画</title></head><style> *{margin: 0;pa.原创 2020-11-09 16:16:40 · 246 阅读 · 0 评论 -
原生JS缓冲运动案例
1、缓冲运动案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缓冲动画</title></head><style> *{mar原创 2020-11-09 15:19:57 · 186 阅读 · 0 评论 -
原生JS匀速运动案例
1、匀速运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>匀速运动</title></head><style> *{margi原创 2020-11-09 14:44:25 · 727 阅读 · 0 评论 -
JS中对象的常用方法
1、Object.assign的使用//assign:第二个参数及以后的参数对象合并到第一个参数上let obj1 = {a:1};let obj2 = {b:2};let obi3 = {c:3};Object.assign(obj1,obj2,obj3);console.log(obj1);//{a:1,b:2,c:3}console.log(obj2);//{b:2}console.log(obj3);//{c:3}2、Object.is的使用//is的使用:类似于===原创 2020-10-28 15:11:24 · 1375 阅读 · 1 评论 -
ES6中数组的常用方法
1、fill的用法//声明指定数组长度,并填充对应数据const arr = new Array(3).fill("Agwenbi");console.log(arr);//["Agwenbi","Agwenbi","Agwenbi"]2、from的用法//from,从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组let str = "Agwenbi";let arr = Array.from(str);console.log(arr);//['A','g','w','e','原创 2020-10-28 11:14:55 · 1022 阅读 · 0 评论 -
js随机圆与矩形功能
1、节点操作版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM节点操作版本</title></head><style> *原创 2020-10-27 16:12:42 · 314 阅读 · 0 评论 -
javascript字符与编码互转
文本框随意输入文字,转成对应编码,点击转字符按钮,再将编码转成对应的字符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-10-23 11:23:20 · 770 阅读 · 0 评论 -
javascript小技巧
1、查看某个循环或某一个段代码的执行时间,“loap”自定义,但前后必须一致console.time("loap");for(let i = 0;i < 100000;i++){}console.timeEnd("loap")2、打印信息使用自定义颜色输出console.log("%c 自定义颜色打印信息","color:#DC143C;");console.log("%c 自定义颜色打印信息 %c自定义文字自大小","color:#DC143C","font-size:14p原创 2020-07-23 11:14:50 · 234 阅读 · 0 评论 -
函数的节流与防抖
1、节流--定时器window.onload = ()=>{ let div = document.getElementById("div"); div.onmousemove = throttle(move,2000);}function move(){ console.log(13546);}function throttle(fn,wait){ var timer = null; return function(){ var原创 2020-06-20 23:41:46 · 1560 阅读 · 0 评论 -
vscdoe个人常用插件
1、Auto Close Tag自动添加HTML/XML关闭标记,与Visual Studio IDE或Sublime文本相同2、Auto Rename Tag自动重命名配对的HTML/XML标记3、Beautify为VS代码美化代码4、Chinese (Simplified) Language Pack for Visual Studio Code中文语言包扩展(简体)5、Close HTML/XML tag快速关闭上次打开的HTML/XML标记6、Code Run原创 2020-06-18 21:06:26 · 474 阅读 · 0 评论 -
js实现监听button按钮点击事件触发file点击事件
var oFile=document.getElementById('file');//button按钮input var oSong_url=document.getElementById('song_url');//file文件input oFile.addEventListener("click",fn,false); function fn(){ if(docu...原创 2017-04-26 10:15:55 · 6611 阅读 · 0 评论 -
点击按钮进退全屏
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-2.1.0.js"></script>&am原创 2018-06-19 10:01:05 · 982 阅读 · 0 评论 -
js找出两个数组中不同的元素
function arr(array,array2){ var arr3 = []; for(键入数组){ var stra = array [key]; var count = 0; for(var j = 0; j <array2.length; j ++){ var strb = ar...原创 2018-03-20 20:15:27 · 14728 阅读 · 2 评论 -
拖动元素放置例子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{overflow: hidden;width: 628px原创 2017-04-25 11:16:56 · 856 阅读 · 0 评论 -
日期格式化函数
1、js版本Date.prototype.format=function(pattern){//日期格式化 var returnValue=pattern; var format={ "y+":this.getFullYear(), "M+":this.getMonth()+1, "d+":this.getDate(), "H+":this.getHours(), "...原创 2017-08-03 21:15:40 · 985 阅读 · 0 评论 -
获取键盘键值
document.onkeydown = function(ev){ var iEvent = ev || event; console.log(iEvent.keyCode); }原创 2017-07-03 12:37:47 · 1781 阅读 · 0 评论 -
文字凹凸效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div{转载 2018-06-26 16:19:11 · 410 阅读 · 0 评论 -
js获取指定城市天气信息
$.ajax({ url:'http://wthrcdn.etouch.cn/weather_mini?city=广州', data:"", dataType:"jsonp", success:function(data){ console.log(data); } })原创 2018-07-12 19:37:13 · 2505 阅读 · 0 评论 -
git提交代码到码云上的详细步骤
1、找到需要上传的项目,右键点击对应的位置2、在弹出的弹出框中,输入git init,按回车,进行项目初始化3、再进行远程端口连接,输入git remote add origin 你的码云项目url4、如果是上传到默认分支则跳过这一步,否则输入git checkout -b 分支名5、将项目中的所有文件进行上传git add .//注意add后面还有一个空格加一个点6、将上...原创 2019-10-10 16:25:59 · 534 阅读 · 0 评论 -
js中文转拼音使用案例
<!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="masterPY.js"></script...原创 2019-09-24 10:52:08 · 646 阅读 · 0 评论 -
js中文转拼音插件源码
1、使用案例:https://blog.csdn.net/Ag_wenbi/article/details/101270867//var anhui = "����";//���ȫƴ//pinyin.getFullChars(anhui);//�����ƴ//pinyin.getCamelChars(anhui);/*---description: Pin...原创 2019-09-24 10:50:09 · 47014 阅读 · 0 评论 -
js获取某个日期的起始周日期及两个日期的间隔天数
//获取起始周var time=$("#exportWeek").val();var time_=new Date(Date.parse(time.replace(/-/g,"-")));var now = new Date(time_);var nowTime = now.getTime() ;var day = now.getDay();var oneDayLong = 24*6...原创 2019-09-16 14:33:11 · 422 阅读 · 0 评论 -
js获取任意区间内的随机数
var _={ random:function(start,stop){ return parseInt(Math.random()*(stop-start)+start); } }console.log(_.random(-5,5));//得到-5~5之间的随机数原创 2018-11-13 09:23:52 · 3143 阅读 · 0 评论 -
动态合并table单元格(行列)
//动态合并单元格 function uniteTable(tableId,colLength) {//表格ID,表格列数 var tb=document.getElementById(tableId); tb.style.display=''; var i = 0; var j = 0; var rowCount =...转载 2018-11-07 17:30:54 · 6163 阅读 · 0 评论 -
pc端上使用rem
function resize(){ var w=document.body.clientWidth; document.querySelector("html").style.fontSize=w*20/1920+'px'; //rem与px没有实际的关系,根据情况不同比例不同的,这里说的根据情况,实际上就是自己设定比例 //假设1rem=20px;那么关系就是(...原创 2019-01-27 11:41:26 · 4514 阅读 · 0 评论 -
在IE与非IE下运用不同的css文件方法
我们经常写页面布局考虑得最多的就是浏览器的兼容问题,主要是IE,所以,我们可以写多个CSS针对IE不同版本,以及非IE的版本浏览器<![if !IE]> <link rel="stylesheet" type="text/css" href="css/zhuce.css" /><![endif]>上面这个是针对非IE时的浏览器,运用的是这个css文件..原创 2016-10-12 17:04:01 · 1084 阅读 · 1 评论 -
js拖动改变div的宽高
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{position: absolute;top: 150px;left: 250px;width: ...原创 2016-10-13 16:20:52 · 8173 阅读 · 0 评论 -
js鼠标经过,实现图片的渐隐渐现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} body{b原创 2016-10-13 18:12:55 · 1284 阅读 · 1 评论 -
ajax的作用
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。无刷新数据读取用户登陆、股票基金网异步、同步AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。有很多使用 ...原创 2016-10-17 18:40:23 · 17432 阅读 · 1 评论 -
通过透明度执行幻灯片
<script type="text/javascript"> window.onload=function(){ var oBox=document.getElementById('box');//找到需要用到的元素 var aLi=oBox.getElementsByTagName('li'); var oUl=document.getElement...原创 2016-10-25 18:30:14 · 273 阅读 · 0 评论 -
js的鼠标滚轮事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{width: 200px;height: 200px;ba原创 2016-11-15 09:42:55 · 536 阅读 · 0 评论 -
div的拖动
在实现div的拖动之前,首现要认识三个主要的事件onmousedown鼠标按下的时候(不能松开)onmousemove鼠标指针在屏幕上移动的时候(抚摸事件)onmouseup鼠标松开的时候知道这些事件之后,我们首先搭建好一个div<!DOCTYPE html><html> <head> <meta charset="UTF-8"&...原创 2016-10-12 15:51:11 · 932 阅读 · 0 评论 -
css盒子塌陷的几种解决方法
<!DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”> <html> <head> <title> </ title> <meta name =“”content =“”> <style> * { 保证金:0像素; 填充:0像素; }原创 2016-10-11 16:45:13 · 4448 阅读 · 0 评论