分类：JS

2020
10-16

JS highcharts动态柱状图原理及实现

实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！看一下代码：<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><html><head><title>HighchartsExample</title><scriptlanguage="javascript"type="text/javascript"src="jquery.min.js"></script><scriptlanguage="java... 继续阅读 >
2020
10-16

JS highcharts实现动态曲线代码示例

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是PHP、.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有acanvasemulatorforIE和Jquery类库... 继续阅读 >
2020
10-16

JS如何操作DOM基于表格动态展示数据

公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时IE内存一直累积，最后会造成崩溃现象使用别人的插件说起来是效果好一些，功能多一些，但是需要的JS和复杂的逻辑，一旦出问题你很难去处理它我也赶不上再去研究它，我直接手工写一个算了，虽然没有多好的效果，没有额外的功能，但是实现动态表格数据刷新，还是能充分满足要求的！先把代码... 继续阅读 >
2020
10-15

如何通过JS实现日历简单算法

最近有用到日历可需要编辑文本的日历，为了绑定数据的方便，所以用js写了一套日历，其实思想也是很简单。实现步骤如下：1、首先取得处理月的总天数js不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：functionis_leap(year){return(year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));}2、接着定义一个包含十二个月在内的月份总天数的数组：m_days=newArr... 继续阅读 >
2020
10-15

浅谈js数组splice删除某个元素爬坑

先来看下几个概念：//splice:返回从原始数组中删除的项（如果没有任何删除，则返回空数组）//当指定2个参数时，表示删除//当指定3个参数，且第2个参数为0时表示插入//当指定3个参数，且第2个参数为1时表示替换本次就拿删除举例，本身我们想删除数组中的某个指定元素，我们需要知道它所在数组中的下标，我们可以用数组.indexOf获取它所在的下标，然后拿splice删除这个元素。本身是没问题代码如下：vararr=["张... 继续阅读 >
2020
10-15

如何使用JS console.log()技巧提高工作效率

我们知道console.log(message)用法很简单，表示将参数message打印到控制台上。console.log('前端小智')//前端小智constmyAge=28console.log(myAge)//28本文主要介绍5个有用的技巧，可帮助你在使用console.log()时提高工作效率。1.打印全名变量如果在控制台打印多个变量，是数量比较多的情况下，我们很难区别哪个变量对应哪个值。functionsum(a,b){console.log(b);returna+b;}sum(1,2);sum(4,5);执行上述代码后，... 继续阅读 >
2020
10-13

Django配置Bootstrap, js实现过程详解

Django配置Bootstrap, js实现过程详解 1、首先在APP目录下创建一个static文件夹如图：#ApplicationdefinitionINSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','appBook.apps.AppbookConfig',]2、在settings.py中最底部添加如下：#Staticfiles(CSS,JavaScript,Images)#https://docs.djangoproject.com/en/1... 继续阅读 >
2020
10-13

原生JS实现相邻月份日历

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>原生JS写的日历月历-demobyjs.alixixi.com</title><styletype="text/css"><!--body{font-size:14px;line-height:20px;margin:0px;padding:0px;text-align:... 继续阅读 >
2020
10-13

原生js实现照片墙效果

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>照片墙一多实例演示</title><styletype="text/css">body,div,h2,ul,li{margin:0;padding:0;}body{font:12px/1.5Arail;}.box{width:860px;margin:10pxauto;backgro... 继续阅读 >
2020
10-13

js轮播图之旋转木马效果

js轮播图之旋转木马效果 本文实例为大家分享了js轮播图之旋转木马效果的具体代码，供大家参考，具体内容如下思路：给定一个数组，储存每张图片的位置，旋转将位置进行替换左旋转：将数组第一个数据删除，然后添加到数组的最后右旋转：将数组最后一个数据删除，然后添加到数组的开头先附上效果图，再来实现接下来就是最主要的，封装原生js动画函数//封装函数获取任意一个元素的任意属性的值（兼容ie8）functiongetStyle(element,attr){returnwindow.ge... 继续阅读 >
2020
10-13

浅析我对JS延迟异步脚本的思考

浅析我对JS延迟异步脚本的思考 关于对延迟脚本的思考async和defer属性的脚本，相信大家都听说过，但是他的真正执行细节是什么样子的？很少有文章认真研究它,可能不太有人注重细节,但其实真正有技术含量的工作和项目,对于性能要求极高,那么细节就很重要了.需要不断的实验自我尝试最近几个月，我一直在研究一些技术，例如linux,操作系统,算法等,预计要持续学习到今年年底。红宝书第四版出来后，我也是花了很多时间去看。对于延迟脚本，自己也是做了一个实验，写下... 继续阅读 >
2020
10-13

移动端JS实现拖拽两种方法解析

移动端JS实现拖拽两种方法解析 移动端的项目经常会引入手势库来实现拖拽不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算最近的项目中就有这么一个需求：因为就这一个地方需要拖拽，所以我就没有引入第三方库移动端的拖拽有两种主流的实现方案：1.将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果；2.使用transform中的平移translate属性实现拖拽。方案一：固定定位fixed这种方案的核心就是给元素添加固定定位position:fixe... 继续阅读 >
2020
10-11

用JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下地图地图：宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的，这里小蛇和食物都是地图的子元素，随机位置显示，脱离文档流的，地图也需要脱离文档流relative，----css需要设置：宽，高，背景颜色，脱标食物—div元素elements---->存储div的数组（将来删除的食物div时候，先从map中删除div，再从数组中移除div）食物：宽，高，背景颜色，横... 继续阅读 >
2020
10-11

js canvas实现俄罗斯方块

本文实例为大家分享了canvas实现俄罗斯方块的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><bodystyle="margin:0;"><canvasid="tetris"style="border:1pxsolid#000;"></canvas><divid="text"style='color:red;font-size:30px;'>当前分数：0</div></body... 继续阅读 >