- html js弹幕功能
kilito_01
javascripthtml
效果如上html{{isStop?'开始弹幕':'停止弹幕'}}添加弹幕jsfunctionAddDanMuFn(option){this.currentDanmuNum=0;//移动到实例属性this.option=option;this.elWidth=option.el.offsetWidth!=0?option.el.offsetWidth:document.querySelector('
- 获取各种高度 等H5页面笔记
年轻人多学点
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.
- 图片预加载和懒加载
简书超级会员
图片预加载,即图片提前加载,可以保证图片快速、无缝的发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。图片出现在视窗内的情况:offsetTop图片预加载和懒加载body{background:#f4f4f4;}.content{width:90%;margin:0auto;display:flex;flex-wrap:wrap;}img{background:#eeeee
- 判断鼠标不同方向进出盒子的方法
哈獭奇
默认盒子的原点在左上角,判断四个方向首先要将原点移动到盒子的中点。然后获取不同方向上的点跟中点的x,y值捕获.PNG实现的方法是:先给盒子添加鼠标移入的事件,然后获取各点距离中点的x,y值;js部分:wrapper.addEventListener('mouseenter',function(e){varx=e.offsetX-this.offsetWidth/2,//鼠标进入点相对盒子X轴的距离
- typescritp 动态获取div的真实高度
马小帅mm
因为typescript的类型检查一直提示没有offsetHeight属性,所以用as类型断言成HTMLDivElement类,就不会报错constel=document.querySelector('.edit-div')constelHeight:number=(elasHTMLDivElement).offsetHeight
- offsetWidth、offsetHeight、clientWidth、clientHeight 介绍
小贤笔记
offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight//返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width//返回元素的宽度(包括元素宽度,不包
- 定位计算距离&获取大小常用API
JTPeng
offset系列offsetParent(html和body之间的空隙被消除掉)本身定位为fixedoffsetParent:null(除了火狐)offsetParent:body(火狐)offsetLeft和offsetTop都是参照于body的!!!本身定位不为fixedoffsetParent:body(父级没有定位)offsetParent:定位父级(父级没有定位)offsetTop只读属
- 原生 JS 懒加载简单实现
ChasenGao
懒加载优势:(1)节省网络资源–一次性加载所有资源很慢(2)对用户体验–节省流量,使用友好(3)对服务器而言–减轻负载压力懒加载原理:只显示可视区域的图片给用户功能实现(1)图片标签默认是占位图,图片真正的地址在自定义属性里(2)滚动时把可是区域的占位图替换成自定义属性里的图片路径需要用到知识点:(1)图片距离顶部的高度:img.offsetTop(2)当前窗口的高度:window.innerHe
- JavaScript DOM属性和方法之element元素对象
知数SEO
JavaScriptjavascript前端开发语言
在HTMLDOM中,elment对象表示HTML与纳素,可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法,有很多都是我们之前用过的。一、element对象属性1、attributes2、childNodes3、className4、clientWidth、offsetWidth、scrollWidth等宽高属性5、contentEditable6、dir7、firstCh
- vuediv给宽度文字溢出解决方法
爱笑的程序狗
直接上代码啦啦啦啦啦啦啦啦啦啦啦啦.div{text-overflow:ellipsis;white-space:nowrap;width:50px;overflow:hidden;}if(this.$refs.test.offsetWidth>50){//处理你的逻辑50是div容器的宽度}
- JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解(含示例图)
渔舟唱晚@
javascript前端开发语言
这里是javascript中制作滚动代码的常用属性页可见区域宽:document.body.clientWidth;网页可见区域高:document.body.clientHeight;window.innerHeight;网页可见区域宽:document.body.offsetWidth(包括边线的宽);网页可见区域高:document.body.offsetHeight(包括边线的宽);网页正
- const maxLeft = appWidth.offsetWidth - 150;这里的150是什么单位
fury_123
js
问:constmaxLeft=appWidth.offsetWidth-150;这里的150是什么单位?回答:
- 输入框内容和占位符过长悬浮提示
白桃与猫
Vue知识点vue.js前端javascript
1.输入框内容过长,内容悬浮提示constisShowTooltip=ref(false);constformData=ref({toChineseCode:''})consthandleMouseOver=(e)=>{//比较元素的宽度和滚动宽度if(e.target.offsetWidthconstformData=ref({dataUnit:''})constplaceholderUnit=
- el-scrollbar自动滚动到底部
张滚滚QAQ
vue.jsjavascript前端
内容滚动到底部的方法:chatListScrollBottom(){constelement=document.querySelector('.chatList')constheight=element.offsetHeightthis.$refs['scrollbar'].wrap.scrollTop=height}
- 页面滚动时判断元素是否在可视区域内
wen_文文
Vuevue.js
/***@description:判断dom元素是否在可视区域内*@param:el:Vuecomponnet对象*@returns:true-在可视区域,false:不在可视区域*/exportconstisElementInViewport=function(el){lets=el.$el.offsetTop//元素相对于页面顶部的距离letx=el.$el.offsetHeight//元素自
- 动态获取填充表格数据时的特定值的赋值
TWenYuan
vue.js
1、如图{{scope.$index+1}}详情操作2、注意tableColumns里的formatter:this.keyFormatterdata(){return{activeName:'first',tableHeight:document.body.offsetHeight-310+"px",//展示切换showOptions:{data:{},showList:true,showDet
- vue中楼层滚动实现原理解析
百變Confucius
image.png楼层效果如上图所示:当点击左边的索引表会跳到对应的模块,同时在滚动模块的时候索引表也跟着变。这个主要是要利用iScroll的iscroll方法,实时获取滚动的y轴数据,同时获取每个索引对应模块的offsetTop的值,保存到一个数组中,这里我是把这个方法放到watch里面的,监视数据是否有变化,同时这里因为我们要获取dom元素,所以要用$nextTick方法等待dom渲染好再获取
- scrollTo滚动到指定位置或指定元素的位置、平滑滚动,以及offsetTop的使用
小玲子小玲子
scrollhtml5javascript
element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素,即高度固定overflow:scroll的那个元素。1.滚动到的位置确定:constparent=document.querySelector(`.parent`)//scrollTo可以直接传入滚动的X,Y值,也可以传入一个对象//直接传值parent.scrollTo(0,100)//传入对象的方式,
- JS-元素尺寸与位置
小沐°
JSjavascript前端开发语言
通过js的方式,得到元素在页面中的位置获取宽高元素.offsetWidth元素.offsetHeight1)获取元素的自身宽高、包括元素自身设置的宽高+padding+border2)获取出来的是数值,方便计算3)注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0获取位置方法一:元素.offsetLeft元素.offsetTop1)获取元素距离自己定位父级元素的左、上距离(与最近一级带有定位
- javascript获取元素在浏览器中工作区域的左、右、上、下距离,或带滚动条的元素在页面中的大小
cdcdhj
javascript学习日记javascript前端
//获取元素在包含元素框中的大小//第1个函数为获取元素在包含元素中左内边框的距离functiongetELementLeft(element){//获取元素在包含元素左边距离varactualeft=element.offsetLeft;//获取元素的上级包含元素varcurrent=element.offsetParent;//循环到一直没有包含元素while(current!==null){
- web前端面试题-JavaScript 第一部分
圣京都
JavaScript面试题javascript
web前端面试题-JavaScript第一部分1JavaScript的组成2JS的基本数据类型和引用数据类型3检测浏览器版本版本有哪些方式?4介绍JS有哪些内置对象?5说几条写JavaScript的基本规范?6如何编写高性能的JavaScript?7DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系8offsetWidth/offsetHeight
- cell中添加webView获取webView的高度
通哥
CGFloatheight=[[self.webViewstringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"]floatValue];
- 写一个判断鼠标进入方向切换图片的效果
_GuGu_
计算机外设前端javascript
直接看代码:import{onMounted,ref}from'vue';importgsapfrom'gsap'constmouse=ref(null)//拿到鼠标的进入事件//监听鼠标进入事件consthandleMouse=(e)=>{consttheta=Math.atan2(mouse.value.offsetHeight,mouse.value.offsetWidth)constang
- HTML之元素相对页面(视口)左上角的坐标
Computer_Tech
HTMLhtmljavascript前端
文章目录一.绝对位置二.相对位置一.绝对位置网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。无论网页滚动条如何滚动,它都是不会变化的。//获取元素的绝对位置坐标(相对于页面左上角)functiongetElementPagePosition(element){//计算x坐标varactualLeft=element.offsetLeft;varcurrent=element.off
- scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。
阿 尭
javascript开发语言ecmascriptcss前端
scrollTop是一个属性,它表示元素的滚动内容垂直滚动条的位置。对于可滚动元素,scrollTop属性返回垂直滚动条滚动的像素数,即元素顶部被隐藏的像素数。offsetTop是一个属性,用于获取一个元素相对于其父元素的垂直偏移量(距离)。具体来说,返回的是一个元素的顶部边缘相对于其offsetParent元素顶部边缘的距离。此时,有一个需求:如果目前在1440分辨率下,则会出现滚动条,希望点击
- js获取元素相对于屏幕的位置坐标
qq_41985405
javascriptvue
getElementPosition(element){lettop=element.offsetTop//这是获取元素距父元素顶部的距离letleft=element.offsetLeftvarcurrent=element.offsetParent//这是获取父元素while(current!==null){//当它上面有元素时就继续执行top+=current.offsetTop//这是获取
- offsetWidth、clientWidth、scrollWidth的区别
一个西瓜大小
javascripthtml前端
offsetWidthoffsetWidth的宽高包括:content、padding、borderclientWidthclientWidth的宽高包括:content、paddingscrollWidthscrollWidth的宽包括:content、padding、hideContent
- tab栏签标根据向上滚动距离,切换到对应的标签上
狮子歌歌_丶
vueJavaScriptjavascript前端vue.js
项目场景:H5项目顶部Tab栏上对应多个标签,根据页面向上滚动高度,将活跃值切换到对应的标签上。实现思路获取到tab全部标签对应的offsetTop值,形成一个数组;根据向上滚动的距离,与数组中的值进行比较,得到对应的索引;最终获取的索引需要赋值给一个变量,而这个变量的初始值应该设置为数组长度-1,当我们数组中没有值与向上滚动距离匹配上是,默认显示最后一个tab标签。测试代码随机数//1.定义的数
- scroll、offset、client —— JS三大家族
crary,记忆
前端知识总结javascript前端开发语言
简介:clientHeight:元素的可见高度,不包括边框和滚动条,是相对于视口的大小——clientHeight=(contentheight)+(paddingtop+paddingbottom)。offsetHeight:元素的高度,包括边框和滚动条,但不包括外边距——offsetHeight=(contentheight)+padding+border。scrollHeight:元素内容的
- CSS-offsetLeft,offsetTop,offsetWidth,offsetHeight
kelly0721
CSS
DOM元素的offsetTop属性值obj.offsetTop:obj相对于版面或由offsetParent属性指定的父坐标的计算上侧位置,整型obj.offsetLeft:obj相对于版面或由offsetParent属性指定的父坐标的计算左侧位置,整型obj.offsetWidth:obj控件自身的绝对宽度,不包括因overflow而未显示的部分,也就是其实际占据的宽度,整型obj.offset
- Hadoop(一)
朱辉辉33
hadooplinux
今天在诺基亚第一天开始培训大数据,因为之前没接触过Linux,所以这次一起学了,任务量还是蛮大的。
首先下载安装了Xshell软件,然后公司给了账号密码连接上了河南郑州那边的服务器,接下来开始按照给的资料学习,全英文的,头也不讲解,说锻炼我们的学习能力,然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.
在hdfs下,运行hadoop fs -mkdir /u
- maven An error occurred while filtering resources
blackproof
maven报错
转:http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources
maven报错:
maven An error occurred while filtering resources
Maven -> Update Proje
- jdk常用故障排查命令
daysinsun
jvm
linux下常见定位命令:
1、jps 输出Java进程
-q 只输出进程ID的名称,省略主类的名称;
-m 输出进程启动时传递给main函数的参数;
&nb
- java 位移运算与乘法运算
周凡杨
java位移运算乘法
对于 JAVA 编程中,适当的采用位移运算,会减少代码的运行时间,提高项目的运行效率。这个可以从一道面试题说起:
问题:
用最有效率的方法算出2 乘以8 等於几?”
答案:2 << 3
由此就引发了我的思考,为什么位移运算会比乘法运算更快呢?其实简单的想想,计算机的内存是用由 0 和 1 组成的二
- java中的枚举(enmu)
g21121
java
从jdk1.5开始,java增加了enum(枚举)这个类型,但是大家在平时运用中还是比较少用到枚举的,而且很多人和我一样对枚举一知半解,下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型,一个返回类型的枚举:
public enum ResultType {
/**
* 成功
*/
SUCCESS,
/**
* 失败
*/
FAIL,
- MQ初级学习
510888780
activemq
1.下载ActiveMQ
去官方网站下载:http://activemq.apache.org/
2.运行ActiveMQ
解压缩apache-activemq-5.9.0-bin.zip到C盘,然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。
启动ActiveMQ以后,登陆:http://localhos
- Spring_Transactional_Propagation
布衣凌宇
springtransactional
//事务传播属性
@Transactional(propagation=Propagation.REQUIRED)//如果有事务,那么加入事务,没有的话新创建一个
@Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务
@Transactional(propagation=Propagation.REQUIREDS_N
- 我的spring学习笔记12-idref与ref的区别
aijuans
spring
idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素,同时提供错误验证功能。例如:
<bean id ="theTargetBean" class="..." />
<bean id ="theClientBean" class=&quo
- Jqplot之折线图
antlove
jsjqueryWebtimeseriesjqplot
timeseriesChart.html
<script type="text/javascript" src="jslib/jquery.min.js"></script>
<script type="text/javascript" src="jslib/excanvas.min.js&
- JDBC中事务处理应用
百合不是茶
javaJDBC编程事务控制语句
解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复
事务常用命令:
Commit提交
- [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论
bijian1013
java多线程线程安全HashMap
在Java类库中出现的第一个关联的集合类是Hashtable,它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能,这当然也是方便的。然而,线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时,无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的,它通过提供一个不同步的
- ng-if与ng-show、ng-hide指令的区别和注意事项
bijian1013
JavaScriptAngularJS
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏,值为true时元素会显示。ng-hide功能类似,使用方式相反。元素的显示或
- 【持久化框架MyBatis3七】MyBatis3定义typeHandler
bit1129
TypeHandler
什么是typeHandler?
typeHandler用于将某个类型的数据映射到表的某一列上,以完成MyBatis列跟某个属性的映射
内置typeHandler
MyBatis内置了很多typeHandler,这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册,比如对于日期型数据的typeHandler,
- 上传下载文件rz,sz命令
bitcarter
linux命令rz
刚开始使用rz上传和sz下载命令:
因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求:
我遇到的问题:
sz下载A文件10M左右,没有问题
但是将这个文件A再传到另一天服务器上时就出现传不上去,甚至出现乱码,死掉现象,具体问题
解决方法:
上传命令改为;rz -ybe
下载命令改为:sz -be filename
如果还是有问题:
那就是文
- 通过ngx-lua来统计nginx上的虚拟主机性能数据
ronin47
ngx-lua 统计 解禁ip
介绍
以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能
支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计.
可以统计与query-times request-time
- java-68-把数组排成最小的数。一个正整数数组,将它们连接起来排成一个数,输出能排出的所有数字中最小的。例如输入数组{32, 321},则输出32132
bylijinnan
java
import java.util.Arrays;
import java.util.Comparator;
public class MinNumFromIntArray {
/**
* Q68输入一个正整数数组,将它们连接起来排成一个数,输出能排出的所有数字中最小的一个。
* 例如输入数组{32, 321},则输出这两个能排成的最小数字32132。请给出解决问题
- Oracle基本操作
ccii
Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
一、表操作
1. 常用数据类型
NUMBER(p,s):可变长度的数字。p表示整数加小数的最大位数,s为最大小数位数。支持最大精度为38位
NVARCHAR2(size):变长字符串,最大长度为4000字节(以字符数为单位)
VARCHAR2(size):变长字符串,最大长度为4000字节(以字节数为单位)
CHAR(size):定长字符串,最大长度为2000字节,最小为1字节,默认
- [强人工智能]实现强人工智能的路线图
comsci
人工智能
1:创建一个用于记录拓扑网络连接的矩阵数据表
2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图
3:将这个流程图导入到矩阵数据表中
4:在矩阵的每个有意义的节点中嵌入一段简单的
- 给Tomcat,Apache配置gzip压缩(HTTP压缩)功能
cwqcwqmax9
apache
背景:
HTTP 压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ,它可以节省40%左右的流量。更为重要的是,它可以对动态生成的,包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩,
- SpringMVC and Struts2
dashuaifu
struts2springMVC
SpringMVC VS Struts2
1:
spring3开发效率高于struts
2:
spring3 mvc可以认为已经100%零配置
3:
struts2是类级别的拦截, 一个类对应一个request上下文,
springmvc是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应
所以说从架构本身上 spring3 mvc就容易实现r
- windows常用命令行命令
dcj3sjt126com
windowscmdcommand
在windows系统中,点击开始-运行,可以直接输入命令行,快速打开一些原本需要多次点击图标才能打开的界面,如常用的输入cmd打开dos命令行,输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
- 再看知名应用背后的第三方开源项目
dcj3sjt126com
ios
知名应用程序的设计和技术一直都是开发者需要学习的,同样这些应用所使用的开源框架也是不可忽视的一部分。此前《
iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架,并对其中一些框架进行了分析,同样国外开发者
@iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了
Facebook Paper使用的第三
- Objective-c单例模式的正确写法
jsntghf
单例iosiPhone
一般情况下,可能我们写的单例模式是这样的:
#import <Foundation/Foundation.h>
@interface Downloader : NSObject
+ (instancetype)sharedDownloader;
@end
#import "Downloader.h"
@implementation
- jquery easyui datagrid 加载成功,选中某一行
hae
jqueryeasyuidatagrid数据加载
1.首先你需要设置datagrid的onLoadSuccess
$(
'#dg'
).datagrid({onLoadSuccess :
function
(data){
$(
'#dg'
).datagrid(
'selectRow'
,3);
}});
2.onL
- jQuery用户数字打分评价效果
ini
JavaScripthtmljqueryWebcss
效果体验:http://hovertree.com/texiao/jquery/5.htmHTML文件代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery用户数字打分评分代码 - HoverTree</
- mybatis的paramType
kerryg
DAOsql
MyBatis传多个参数:
1、采用#{0},#{1}获得参数:
Dao层函数方法:
public User selectUser(String name,String area);
对应的Mapper.xml
<select id="selectUser" result
- centos 7安装mysql5.5
MrLee23
centos
首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安装mysql的步骤。
#列出所有被安装的rpm package rpm -qa | grep mariadb
#卸载
rpm -e mariadb-libs-5.
- 利用thrift来实现消息群发
qifeifei
thrift
Thrift项目一般用来做内部项目接偶用的,还有能跨不同语言的功能,非常方便,一般前端系统和后台server线上都是3个节点,然后前端通过获取client来访问后台server,那么如果是多太server,就是有一个负载均衡的方法,然后最后访问其中一个节点。那么换个思路,能不能发送给所有节点的server呢,如果能就
- 实现一个sizeof获取Java对象大小
teasp
javaHotSpot内存对象大小sizeof
由于Java的设计者不想让程序员管理和了解内存的使用,我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法,但是由于各个虚拟机在内存使用上可能存在不同,因此该方法不能在各虚拟机上都适用,而是仅在hotspot 32位虚拟机上,或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。
- SVN错误及处理
xiangqian0505
SVN提交文件时服务器强行关闭
在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found
文件:repository/db/txn_current、repository/db/current
其中current记录当前最新版本号,txn_current记录版本库中版本