- vue如何获取一个元素的基本信息
LJ小番茄
随便写点Vue的那些三两事儿~vue.jsjavascript前端
PS:代码全部使用Vue3和setup语法糖来写的首先准备HTML结构点击该元素的相关信息获取Vue部分import{onMounted,ref}from"vue";constmyElement=ref(null);constonClick=()=>{console.log('myElement.value.clientWidth='+myElement.value.clientWidth);co
- ElementUI 动态表格高度,使页面一屏显示
我的心巴
elementui前端javascript
一、效果二、代码exportdefault{data(){return{maxHeight:500}},methods:{handlePageReSize(){letcard=document.querySelector('.el-card');this.maxHeight=card.clientHeight-108;}},mounted(){let_this=this;window.onresi
- vue移动端适配postcss-px-to-viewport
我是七月
在之前有一种流行已久的移动端适配方案,那就是rem,我想下面这两句代码,有不少老移动端都不会陌生:constdeviceWidth=document.documentElement.clientWidth||document.body.clientWidth;document.querySelector('html').style.fontSize=deviceWidth/7.5+'px';没错,
- vue.js 获取当前屏幕的宽度_js获取浏览器和屏幕的各种宽度高度
梦终会碎
vue.js获取当前屏幕的宽度
一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小)1.对于IE9+、chrome、firefox、Opera、Safari:window.innerHeight浏览器窗口的内部高度;window.innerWidth浏览器窗口的内部宽度;2.对于IE8.7.6.5:document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;do
- 获取各种高度 等H5页面笔记
年轻人多学点
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.
- 【elementUi-table表格】 滚动条 新增监听事件; 滚动条滑动到指定位置;
今天搬砖了么
前端elementui前端javascriptvuehtml
1、给滚动条增加监听this.dom=this.$refs.tableRef.bodyWrapperthis.dom.scrollTop=0let_that=thisthis.dom.addEventListener('scroll',()=>{//获取元素的滚动距离letscrollTop=_that.dom.scrollTop//获取元素可视区域的高度letclientHeight=this.
- js使用touchstart touchmove touchend函数实现h5移动端上下滑动翻页
是草莓味的啊
javascript前端
~没有更多了~~暂无数据~//虚拟滚动,解决数组大量卡顿问题importVirtualListfrom'vue-virtual-scroll-list'importListItemfrom'./ListItem.vue'import{onCall,onMap}from'@/utils/index'constclientHeight=document.documentElement.clientHe
- day29 js基础5
跟我念一遍
//获取可视区的宽度和高度//获取宽高的时候,要看有没有DTD的说明,如果有,使用documentElement,如果没有,使用bodyvarclientWidth=document.documentElement.clientWidthvarclientHeight=document.documentElement.clientHeight1、吸顶条//可以直接获取到div的宽度和高度,而且是不
- oracle查询中间条记录,oracle SQL查询中间若干条记录
y921112y921112
oracle查询中间条记录
方法一:利用rownum和差集函数minusselect*from(select*fromemporderbysal)whererownumfirst();Eloquent内部使用的是PDO参数绑定,所以你的请求是安...vue实现pc端无限加载功能主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop+clientHeight>=scrollHeight时(此时滚
- 浏览器详解
Fraday
内置对象windoweg:window.innerWidth||document.body.clientWidth;historyeg:go(-1)locationeg:hrefnavigationeg:online:true(常用表示浏览器是否连接到了inter网)screeneg:deviceXDPI(可能会用到表示屏幕实际的水平DBI)http://caniuse.com确定某个api的兼容
- echarts图表导出为pdf
weixin_43160044
前端echartspdfjavascript
importhtml2canvasfrom'html2canvas'importJsPDFfrom'jspdf'//id->放echarts图表的节点id//fileName->想要生成的文件名functionexportData(id,fileName){constel=document.getElementById(id)constelWidth=el.clientWidthconstelHe
- day24 其他事件(页面尺寸事件)
亦昭昭
记录前端学习javascript前端
目录页面尺寸事件元素尺寸于位置尺寸页面尺寸事件会在窗口尺寸改变的时候触发事件resize检测屏幕宽度获取宽高获取元素的可见部分宽高(不包含边框、margin、滚动条等),即:内容+padding+borderclientWidth和clientHeightDocumentdiv{width:200px;height:200px;background-color:gold;padding:10px;
- react ref获取元素高度
Justice23
reactreact
importReactDOMfrom"react-dom";classAppextendsComponent{constructor(props){super(props);this.state={width:0};}componentDidMount(){constwidth=this.divElement.clientWidth;this.setState({width});}render()
- HTML代码春节烟花
不会写代码的小彭
html前端javascript
代码运行效果代码新春快乐html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}CommandsInfoSharefunctioninitVars(){pi=Math.PI;ctx=canvas.getContext("2d");canvas.width=canvas.clientWidth;canv
- 34.性能优化问题,老司机如何解决(下)
ikonan
上一节课,我们从宏观上讲述了性能优化的概念。这一节,我们直接来「手写代码」。在此之前,我们先回顾一下「性能优化」主题的知识点:代码例题实战「白板写代码」是考察候选人基础能力、思维能力的有效手段。这一部分,我们列举几个性能相关的代码片段,供读者体会。实战1:初步解决布局抖动问题请候选人对以下代码进行优化:varh1=element1.clientHeightelement1.style.height
- 滑动一整屏
初晨未凉
前端javascript
需求:用户通过鼠标滚轮滑动的时候一整屏进行翻页。参考网站效果微派网络实现思路:1.首先我们需获取可视区域的高度document.documentElement.clientHeight;2.根据动态设置top属性即可进行翻页。3.需判断上滑还是下滑根据onmousewheel滚轮事件即可判断,开始时间为当前时间,结束时间为事件结束以后当时间,若是差值为负数到一定区间,即可判断为向上滑动,否则为向下
- 随笔50-原生写某块区域下拉触底事件
是青水啊
因为上面不是随笔47写了element的下拉框触底事件,但是现在做了一个东西没有使用框架,没办法,就手动需要写一个下拉触底事件代码如下@scroll是下拉事件在onReachBottom方法里判断内容的高度减去滚动条距离顶部的距离是否小于或者等于该容器的固定高度如果是就代表触底了letclientHeight=this.$refs.activity_scroll.clientHeight;//该容
- offsetWidth、offsetHeight、clientWidth、clientHeight 介绍
小贤笔记
offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight//返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width//返回元素的宽度(包括元素宽度,不包
- vue解决PC端等比缩放适配手机端
zhaokai621
Vuevue等比缩放适配手机端vue
在App.vue中setup(){constbodyScale=()=>{letdevicewidth=document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度letscale=devicewidth/1920//分母——设计稿的尺寸document.body.style.zoom=scale//放大缩小相应倍数}onMounted(()=>{bo
- vue 适配大屏 页面 整体缩放
NewChapter °
javascript前端html
正常应该放在app.vue里面。我这里因为用到element-ui弹框无法缩放,所以加在body上面(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=do
- 【vue3.0】26.0 某东到家( 廿六)——不同设备适配和项目上线
bobokaka
不同设备适配目前是针对普通手机的屏幕尺寸设计,如果需要适配比如平板电脑,等比例放大,需要进行设备配置。修改public\index.html只需要在title后面增加如下代码://设备屏幕的宽度varwidth=document.documentElement.clientWidth||document.body.clientWidthvarratio=width/375varfontSize=1
- vue pc端网页实现自适应
奶昔不会射手
vue.js前端javascript
一、基本原理pc端做自适应可以用rem来实现,啥是rem,自己百度二、新建rem.ts文件//rem等比适配配置文件//基准大小constbaseSize=14//设置rem函数functionsetRem(){//当前页面宽度相对于1920宽的缩放比例,可根据自己需要修改。这里的1920是设计图的宽度constscale=document.documentElement.clientWidth/
- js实现自动滚动
学敲代码的Stars
javascript前端开发语言
js实现自动滚动,再也不用求swiper组件啦标签需要自动滚动的内容样式#box{width:100%;height:100%;overflow-y:auto;}自动滚动代码functionscroll(bigBox,primary,copy,time){if(bigBox.clientHeight>=primary.scrollHeight){//不需要滚动return;}varnum=0;co
- JavaScript DOM属性和方法之element元素对象
知数SEO
JavaScriptjavascript前端开发语言
在HTMLDOM中,elment对象表示HTML与纳素,可以包含的节点类型有元素u节点、文本节点、注释节点。它们有响应的属性和方法,有很多都是我们之前用过的。一、element对象属性1、attributes2、childNodes3、className4、clientWidth、offsetWidth、scrollWidth等宽高属性5、contentEditable6、dir7、firstCh
- JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解(含示例图)
渔舟唱晚@
javascript前端开发语言
这里是javascript中制作滚动代码的常用属性页可见区域宽:document.body.clientWidth;网页可见区域高:document.body.clientHeight;window.innerHeight;网页可见区域宽:document.body.offsetWidth(包括边线的宽);网页可见区域高:document.body.offsetHeight(包括边线的宽);网页正
- js实现div铺满整个屏幕
瞳孔里的温柔你看得见不
exportfunctiongetWindows(id){letbaseid=document.getElementById(id)console.log(baseid)constwidth=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.client
- Angularjs 动态获取屏幕宽度
壹只很拽的猫
我是写在directivewindow.onresize=function(){$scope.$apply(function(){console.log("document.body.clientWidth",document.body.clientWidth);})};参考文档:angular怎么监听屏幕宽度改变angularjs中如何实现页面自适应?这个看起来能实现但是我没整明白
- 移动端原生js适配
华夏工程师
(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWi
- JS让页面滚动到底部
若风华浊世间
HTML-前端学习记录
需要让页面直接滚动到底部,按钮点击时调用的方法里面加上这两行就行了vart=document.body.clientHeight;window.scroll({top:t,left:0,behavior:‘smooth’});
- js如何获得浏览器的宽高
恰小面包
javascriptjava开发语言
在JavaScript中,可以使用window对象的innerWidth和innerHeight属性来获取浏览器窗口的宽度和高度,或者使用document.documentElement.clientWidth和document.documentElement.clientHeight来获取视口(viewport)的宽度和高度。以下是具体的代码示例:javascript//获取浏览器窗口的宽度和高
- ios内付费
374016526
ios内付费
近年来写了很多IOS的程序,内付费也用到不少,使用IOS的内付费实现起来比较麻烦,这里我写了一个简单的内付费包,希望对大家有帮助。
具体使用如下:
这里的sender其实就是调用者,这里主要是为了回调使用。
[KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa
- 20 款优秀的 Linux 终端仿真器
brotherlamp
linuxlinux视频linux资料linux自学linux教程
终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。(LCTT 译注:终端仿真器原意指对大型机-哑终端方式的模拟,不过在当今的 Linux 环境中,常指通过远程或本地方式连接的伪终端,俗称“终端”。)
你能从开源世界中找到大量的终端仿真器,它们
- Solr Deep Paging(solr 深分页)
eksliang
solr深分页solr分页性能问题
转载请出自出处:http://eksliang.iteye.com/blog/2148370
作者:eksliang(ickes) blg:http://eksliang.iteye.com/ 概述
长期以来,我们一直有一个深分页问题。如果直接跳到很靠后的页数,查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr
- 数据库面试题
18289753290
面试题 数据库
1.union ,union all
网络搜索出的最佳答案:
union和union all的区别是,union会自动压缩多个结果集合中的重复结果,而union all则将所有的结果全部显示出来,不管是不是重复。
Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序;
Union All:对两个结果集进行并集操作,包括重复行,不进行排序;
2.索引有哪些分类?作用是
- Android TV屏幕适配
酷的飞上天空
android
先说下现在市面上TV分辨率的大概情况
两种分辨率为主
1.720标清,分辨率为1280x720.
屏幕尺寸以32寸为主,部分电视为42寸
2.1080p全高清,分辨率为1920x1080
屏幕尺寸以42寸为主,此分辨率电视屏幕从32寸到50寸都有
适配遇到问题,已1080p尺寸为例:
分辨率固定不变,屏幕尺寸变化较大。
如:效果图尺寸为1920x1080,如果使用d
- Timer定时器与ActionListener联合应用
永夜-极光
java
功能:在控制台每秒输出一次
代码:
package Main;
import javax.swing.Timer;
import java.awt.event.*;
public class T {
private static int count = 0;
public static void main(String[] args){
- Ubuntu14.04系统Tab键不能自动补全问题解决
随便小屋
Ubuntu 14.04
Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全,解决办法如下:
1、利用vi编辑器打开/etc/bash.bashrc文件(需要root权限)
sudo vi /etc/bash.bashrc
接下来会提示输入密码
2、找到文件中的下列代码
#enable bash completion in interactive shells
#if
- 学会人际关系三招 轻松走职场
aijuans
职场
要想成功,仅有专业能力是不够的,处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢?在此,教您简单实用的三个窍门。
第一,多汇报
最近,管理学又提出了一个新名词“追随力”。它告诉我们,做下属最关键的就是要多请示汇报,让上司随时了解你的工作进度,有了新想法也要及时建议。不知不觉,你就有了“追随力”,上司会越来越了解和信任你。
第二,勤沟通
团队的力
- 《O2O:移动互联网时代的商业革命》读书笔记
aoyouzi
读书笔记
移动互联网的未来:碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。
O2O:Online to OffLine 线上线下活动
O2O就是在移动互联网时代,生活消费领域通过线上和线下互动的一种新型商业模式。
手机二维码本质:O2O商务行为从线下现实世界到线上虚拟世界的入口。
线上虚拟世界创造的本意是打破信息鸿沟,让不同地域、不同需求的人
- js实现图片随鼠标滚动的效果
百合不是茶
JavaScript滚动属性的获取图片滚动属性获取页面加载
1,获取样式属性值
top 与顶部的距离
left 与左边的距离
right 与右边的距离
bottom 与下边的距离
zIndex 层叠层次
例子:获取左边的宽度,当css写在body标签中时
<div id="adver" style="position:absolute;top:50px;left:1000p
- ajax同步异步参数async
bijian1013
jqueryAjaxasync
开发项目开发过程中,需要将ajax的返回值赋到全局变量中,然后在该页面其他地方引用,因为ajax异步的原因一直无法成功,需将async:false,使其变成同步的。
格式:
$.ajax({ type: 'POST', ur
- Webx3框架(1)
Bill_chen
eclipsespringmaven框架ibatis
Webx是淘宝开发的一套Web开发框架,Webx3是其第三个升级版本;采用Eclipse的开发环境,现在支持java开发;
采用turbine原型的MVC框架,扩展了Spring容器,利用Maven进行项目的构建管理,灵活的ibatis持久层支持,总的来说,还是一套很不错的Web框架。
Webx3遵循turbine风格,velocity的模板被分为layout/screen/control三部
- 【MongoDB学习笔记五】MongoDB概述
bit1129
mongodb
MongoDB是面向文档的NoSQL数据库,尽量业界还对MongoDB存在一些质疑的声音,比如性能尤其是查询性能、数据一致性的支持没有想象的那么好,但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能,而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩),同时它提供的近似于SQL的查询能力,也是在做NoSQL技术选型时,考虑的一个重要因素。Mo
- spring/hibernate/struts2常见异常总结
白糖_
Hibernate
Spring
①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException
缺少aspectjweaver.jar,该jar包常用于spring aop中
②java.lang.ClassNotFoundException: org.sprin
- jquery easyui表单重置(reset)扩展思路
bozch
formjquery easyuireset
在jquery easyui表单中 尚未提供表单重置的功能,这就需要自己对其进行扩展。
扩展的时候要考虑的控件有:
combo,combobox,combogrid,combotree,datebox,datetimebox
需要对其添加reset方法,reset方法就是把初始化的值赋值给当前的组件,这就需要在组件的初始化时将值保存下来。
在所有的reset方法添加完毕之后,就需要对fo
- 编程之美-烙饼排序
bylijinnan
编程之美
package beautyOfCoding;
import java.util.Arrays;
/*
*《编程之美》的思路是:搜索+剪枝。有点像是写下棋程序:当前情况下,把所有可能的下一步都做一遍;在这每一遍操作里面,计算出如果按这一步走的话,能不能赢(得出最优结果)。
*《编程之美》上代码有很多错误,且每个变量的含义令人费解。因此我按我的理解写了以下代码:
*/
- Struts1.X 源码分析之ActionForm赋值原理
chenbowen00
struts
struts1在处理请求参数之前,首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性,却找不到对应的ActionForm类也不会报错,只是不会处理本次请求的请求参数。
如果找到了对应的ActionForm类,则先判断是否已经存在ActionForm的实例,如果不存在则创建实例,并将其存放在对应的作用域中。作用域由配置文件action节点的s
- [空天防御与经济]在获得充足的外部资源之前,太空投资需有限度
comsci
资源
这里有一个常识性的问题:
地球的资源,人类的资金是有限的,而太空是无限的.....
就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制....
&
- ORACLE临时表—ON COMMIT PRESERVE ROWS
daizj
oracle临时表
ORACLE临时表 转
临时表:像普通表一样,有结构,但是对数据的管理上不一样,临时表存储事务或会话的中间结果集,临时表中保存的数据只对当前
会话可见,所有会话都看不到其他会话的数据,即使其他会话提交了,也看不到。临时表不存在并发行为,因为他们对于当前会话都是独立的。
创建临时表时,ORACLE只创建了表的结构(在数据字典中定义),并没有初始化内存空间,当某一会话使用临时表时,ORALCE会
- 基于Nginx XSendfile+SpringMVC进行文件下载
denger
应用服务器Webnginx网络应用lighttpd
在平常我们实现文件下载通常是通过普通 read-write方式,如下代码所示。
@RequestMapping("/courseware/{id}")
public void download(@PathVariable("id") String courseID, HttpServletResp
- scanf接受char类型的字符
dcj3sjt126com
c
/*
2013年3月11日22:35:54
目的:学习char只接受一个字符
*/
# include <stdio.h>
int main(void)
{
int i;
char ch;
scanf("%d", &i);
printf("i = %d\n", i);
scanf("%
- 学编程的价值
dcj3sjt126com
编程
发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助
像这位朋友学习:
http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html
VirtualGS教程 (By @林泰前): 几十年的老程序员,资深的
- 二维数组(矩阵)对角线输出
飞天奔月
二维数组
今天在BBS里面看到这样的面试题目,
1,二维数组(N*N),沿对角线方向,从右上角打印到左下角如N=4: 4*4二维数组
{ 1 2 3 4 }
{ 5 6 7 8 }
{ 9 10 11 12 }
{13 14 15 16 }
打印顺序
4
3 8
2 7 12
1 6 11 16
5 10 15
9 14
13
要
- Ehcache(08)——可阻塞的Cache——BlockingCache
234390216
并发ehcacheBlockingCache阻塞
可阻塞的Cache—BlockingCache
在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式的来使用Ehcache的锁,那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类,可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.
- mysqldiff对数据库间进行差异比较
jackyrong
mysqld
mysqldiff该工具是官方mysql-utilities工具集的一个脚本,可以用来对比不同数据库之间的表结构,或者同个数据库间的表结构
如果在windows下,直接下载mysql-utilities安装就可以了,然后运行后,会跑到命令行下:
1) 基本用法
mysqldiff --server1=admin:12345
- spring data jpa 方法中可用的关键字
lawrence.li
javaspring
spring data jpa 支持以方法名进行查询/删除/统计。
查询的关键字为find
删除的关键字为delete/remove (>=1.7.x)
统计的关键字为count (>=1.7.x)
修改需要使用@Modifying注解
@Modifying
@Query("update User u set u.firstna
- Spring的ModelAndView类
nicegege
spring
项目中controller的方法跳转的到ModelAndView类,一直很好奇spring怎么实现的?
/*
* Copyright 2002-2010 the original author or authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* yo
- 搭建 CentOS 6 服务器(13) - rsync、Amanda
rensanning
centos
(一)rsync
Server端
# yum install rsync
# vi /etc/xinetd.d/rsync
service rsync
{
disable = no
flags = IPv6
socket_type = stream
wait
- Learn Nodejs 02
toknowme
nodejs
(1)npm是什么
npm is the package manager for node
官方网站:https://www.npmjs.com/
npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作
在开发过程往往会需要用到其他的包,使用npm就可以下载这些包来供程序调用
&nb
- Spring MVC 拦截器
xp9802
spring mvc
Controller层的拦截器继承于HandlerInterceptorAdapter
HandlerInterceptorAdapter.java 1 public abstract class HandlerInterceptorAdapter implements HandlerIntercep