分类：Js

2020
09-24

js实现动态时钟

js实现动态时钟 本文实例为大家分享了js实现动态时钟的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><title>时钟</title></head><scripttype="text/javascript">functiontodou(n){if(n<10){return'0'+n;}else{return''+n;}}window.onload=function(){setInterval(function(){vardate=newDate();varma=document.getElementsByTagName('img');varstr=todou(date.getHours())+todou(date.getMin... 继续阅读 >
2020
09-24

Vue组件间的通信pubsub-js实现步骤解析

本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较自由，不存在组件间的关系问题1.首先安装pubsub-jsnpminstall--savepubsub-js2.订阅方组件importPubSubfrom'pubsub-js'mounted(){//执行异常代码//订阅消息PubSub.subscribe('deleteTodo',(msg,index)=>{this.deleteTodo(index)//调用deleteTodo方法执行真正的业务逻辑});},3.发布方组件<script>importPubSubfrom'pubsub-js'exportdefa... 继续阅读 >
2020
09-24

Js逆向实现滑动验证码图片还原的示例代码

Js逆向实现滑动验证码图片还原的示例代码 本文列举两个例子：某象和某验的滑动验证一、某验：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s未还原图像:还原后的图:从服务端请求来的图片是打乱后的，给用户看的时候是完整的，这个过程肯定是运行了某段js代码，将打乱的图片进行还原操作。所以我们需要找到这段js，然后还原它的代码逻辑，实现图片的还原操作，找到缺口距离，实现滑动操作。如果你仔细观察的话，你会发现还原后的图它是canvas生成出来的那你... 继续阅读 >
2020
09-24

非常漂亮的js烟花效果

本文实例为大家分享了js实现漂亮烟花效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>烟花</title><styletype="text/css">div>div{width:10px;height:10px;border-radius:50%;position:absolute;top:900px;left:600px;background-color:red;}</style></head><body><divid="box"><divid="start"></div></div></body><scripttype="text/javascript">varsta... 继续阅读 >
2020
09-24

原生JS实现烟花效果

原生JS实现烟花效果 原生JS实现烟花效果，点击页面生成烟花，向四周扩散，然后再坠落下去。（这里的烟花我是用的特殊字符爱心形状）基础css代码/*设置基础的css样式*/body{background:#000;overflow:hidden;}.fire{position:absolute;width:4px;height:30px;}js代码：1、给页面添加点击事件，生成主体烟花//给页面设置点击事件document.onclick=function(eve){vare=eve||window.event;//设置一个空数组,用来后面存放小烟花vara... 继续阅读 >
2020
09-24

JS实现iframe中子父页面跨域通讯的方法分析

本文实例讲述了JS实现iframe中子父页面跨域通讯的方法。分享给大家供大家参考，具体如下：在非跨域的情况下，iframe中的子父页面可以很方便的通讯，但是在跨域的情况下，只能通过window.postMessage()方法来向其他页面发送信息，其他页面要通过window.addEventListener()监听事件来接收信息；#跨域发送信息#window.postMessage()语法otherWindow.postMessage(message,targetOrigin,[transfer]);otherWindow其他窗口的一个引... 继续阅读 >
2020
09-24

JS Html转义和反转义（html编码和解码）的实现与使用方法总结

本文实例讲述了JSHtml转义和反转义（html编码和解码）的实现与使用方法。分享给大家供大家参考，具体如下：1、JS实现html转义和反转义主要有两种方式：1）、利用用浏览器内部转换器实现html转义；2）、用正则表达式实现html转义；2、封装的JS工具类：varHtmlUtil={/*1.用浏览器内部转换器实现html编码（转义）*/htmlEncode:function(html){//1.首先动态创建一个容器标签元素，如DIVvartemp=document.c... 继续阅读 >
2020
09-24

js模拟实现烟花特效

js模拟实现烟花特效 本文实例为大家分享了js实现烟花特效的具体代码，供大家参考，具体内容如下如下图首先描绘圆周运动//d1/*css*/div{height:4px;width:4px;background:red;position:absolute;}//jsvardiv=document.getElementById('div');//画运动点document.getElementsByTagName('body')[0].appendChild(tdiv);//添加节点vardeg=0;//运动角度varr=100;//半径varcenter=[300,300]//圆心vardd=Math.PI/180;//P... 继续阅读 >
2020
09-24

JS实现放烟花效果

本文实例为大家分享了JS实现放烟花效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>放烟花——欣欣博客</title><style>html,body{overflow:hidden;}body,div,p{margin:0;padding:0;}body{background:#000;font:12px/1.5arial;color:#7A7A7A;}.fire{width:3px;height:30px;background:white;position:absolute;}.spark{position:absolute;width:6px;... 继续阅读 >
2020
09-24

JS Web Flex弹性盒子模型代码实例

JS Web Flex弹性盒子模型代码实例 1.justify-content<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Flexbox弹性盒布局</title><style>.demo{display:-webkit-flex;justify-content:space-between;}</style></head><style></style><body><divclass="demo"><div>姓名：张三</div><div>年龄：26岁</div></div><divclass="demo">... 继续阅读 >
2020
09-24

JS如何在数组指定位置插入元素

一、JavaScriptsplice()方法splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。方法实例//在数组指定位置插入varfruits=["Banana","Orange","Apple","Mango"];fruits.splice(2,0,"Lemon","Kiwi");//输出结果//Banana,Orange,Lemon,Kiwi,Apple,Mango//在数组开头插入varshuiguo=["Banana","Orange","Apple","Mango"];shuiguo.splice(0,0,"Lemon");//输出结果//Lemon,Banana,Orange,Apple,... 继续阅读 >
2020
09-24

JavaScript实现简单贪吃蛇效果

JavaScript实现简单贪吃蛇效果 本文实例为大家分享了js实现简单贪吃蛇效果的具体代码，供大家参考，具体内容如下上代码之前，先给大家看一下效果：是不是想说：我能这样玩一天…话不多说，代码如下：<script>classMap{constructor(){//提前设定将来的地图的样式数据this.w=450;this.h=250;this.c="#DDD";//执行创建地图方法this.createEle();}createEle(){this.mapEle=document.createElement("div");this.mapEle.style.cssText... 继续阅读 >
2020
09-24

js实现无缝轮播图效果

本文实例为大家分享了js实现无缝轮播图的具体代码，供大家参考，具体内容如下//Utils.js//封装预加载图片varUtils=(function(){return{//SSSloadImg:function(srcList,callBack){//图片地址回调函数varimg=newImage();img.num=0;//初始化num为0图片数img.imgList=[];//存放图片img.srcList=srcList;img.callBack=callBack;//回调函数img.addEventListener("load",this.... 继续阅读 >
2020
09-24

js实现无缝轮播图

本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下CSS样式：<styletype="text/css">#box{width:1000px;height:375px;border:3pxsolidblack;margin:30pxauto;position:relative;overflow:hidden;}#box.img{position:absolute;left:0;top:0;}#box.imgimg{width:1000px;height:375px;float:left;}#box.btninput{border-radius:50%;border:0;width:40px;height:40px;font-size:2... 继续阅读 >
2020
09-24

原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码，供大家参考，具体内容如下CSS样式：<style>.cont{margin:0auto;position:relative;}.box{float:left;padding:5px;}.imgbox{border:blacksolid1px;padding:5px;border-radius:5px;}.imgboximg{width:200px;display:block;}</style>HTML结构:<divclass="cont"><divclass="box"><divclass="imgbox"><imgsrc="img/1.jpg"></div></div>//......此处省略雷... 继续阅读 >