位置: 编程技术 - 正文

JavaScript 经典实例日常收集整理(常用经典)(js经典实例)

编辑:rootadmin

推荐整理分享JavaScript 经典实例日常收集整理(常用经典)(js经典实例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js100个经典实例,js类的实现,js类的实现,js经典实例,js实例教程,javascript例子,javascript例子,javascript例子,内容如对您有帮助,希望把文章链接给更多的朋友!

本文是小编日常收集整理些js经典实例,特此分享到积木网平台供大家参考!

跨浏览器添加事件

跨浏览器移除事件

跨浏览器阻止默认行为

跨浏览器获取目标对象

跨浏览器获取滚动条位置

跨浏览器获取可视窗口大小

js 对象冒充

js 异步加载和同步加载

异步加载也叫非阻塞模式加载,浏览器在下载js的同时,同时还会执行后续的页面处理。

在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了:

同步加载

  平常默认用的都是同步加载。如:

  同步模式又称阻塞模式,会阻止流览器的后续处理。停止了后续的文件的解析,执行,如图像的渲染。浏览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。

  通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

  同步加载流程是瀑布模型,异步加载流程是并发模型。

js获取屏幕坐标

注释:

1.documentElement 属性可返回文档的根节点。 2.scrollTop() 为滚动条向下移动的距离3.document.documentElement.scrollTop 指的是滚动条的垂直坐标4.document.documentElement.clientHeight 指的是浏览器可见区域高度

--------------------------------------------------------------------------------

DTD已声明的情况下:

如果在页面中添加这行标记的话

IE

document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop ==> 浏览器滚动部分高度document.body.scrollTop ==>始终为0document.documentElement.clientHeight ==>浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop==> 始终为0document.body.scrollTop==>浏览器滚动部分高度document.documentElement.clientHeight ==> 浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

clientHeight

在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

JavaScript 经典实例日常收集整理(常用经典)(js经典实例)

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE则没有这个,所以在IE下使用这个:

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.

最给力的是,chrome和safari一条龙通杀!完全支持所有属性

js拖拽效果

offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

js获取图片原始大小尺寸

js循环遍历数组

遍历二维数组

阻止表单重复提交

有两种方法可以解决:一是提交之后,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。document.getElementById("btn").disabled = true;//第一次提交后,将按钮禁用

这种方式只能用于通过提交按钮防止重复提交,还可以使用如下方式:

字符串部分

在字符串中查找子字符串

Number和Math部分

数字可以是一个直接量,也可以是一个对象,但是Math对象不同,他没有构造函数,并且其所有的属性和方法都是直接通过这个对象来访问的

把十进制转化为一个十六进制值

js中,十进制数字以0x开头,八进制数字总是以0开头

随进产生颜色

目前,所有浏览器都支持RGB表示法和十六进制表示法,除了IE7,它只支持十六进制表示法

在角度和弧度之间转换

var rad = degrees*(Math.PI/);

var degrees = rad*(/Math.PI);

数组部分

创建多维数组

排序数组

Array对象的sort方法会按照字母顺序来排序数组元素。对于数字,是按照字符编码的顺序进行排序

Date日期时间部分

js计算时间差

正则部分

js实现千分位分隔

js判断传入参数是否为质数

js判断字符串出现最多的字符,并统计次数

以上内容是小编日常收集整理的JavaScript 经典实例,非常具有参考价值,感兴趣的朋友收藏起来吧。

网页中JS函数自动执行常用三种方法 本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一、JS方法1.最简单的调用方式,直接写到html的body标签里面:bodyonload="

基于javascript实现样式清新图片轮播特效 本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下一、实现效果如上图:1、图片自动依次轮换,每轮换到一张图片,下面对

javascript实现数字倒计时特效 本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下:效果图:htmlheadmetahttp-equiv="Content-Type"content="text/html;char

标签: js经典实例

本文链接地址:https://www.jiuchutong.com/biancheng/375998.html 转载请保留说明!

上一篇:JavaScript 浏览器兼容性总结及常用浏览器兼容性分析(JavaScript 浏览器对象)

下一篇:网页中JS函数自动执行常用三种方法(js网页自动化)

  • 价外费用含税吗
  • 国家重大水利工程建设基金计算方法
  • 受托加工的物资是哪个科目
  • 三方合同怎么盖章
  • 不能收回的应收票据
  • 利息支出可以抵扣吗
  • 营业外支出罚款所得税怎么处理
  • 可转换公司债券属于哪一类金融资产
  • 报销差旅费需要交进项税吗
  • 销售折扣购货方的会计分录
  • 学校付学生的现金奖励入什么科目
  • 注册资金未缴齐什么意思
  • 技术研发阶段的费用如何做分录
  • 营改增之后的增值税
  • 营业账簿印花税包括什么
  • 增值税为什么申报不了
  • 上海个人住房房产税
  • 开办期间的税控设备怎么入账?
  • 低价销售代替非正常损失避免转出进项税?
  • 保险代理公司做什么
  • 餐饮业管理费用明细表
  • 进项退回怎么做账
  • 什么是应收
  • u盘如何进行杀毒
  • 资产负债表的资产总额怎么看
  • 固定资产未开发票怎么入账
  • mac安装双系统教程
  • 桌面图标间距特别大
  • 电脑密码解除步数怎么弄
  • vue qrcode生成二维码
  • 路由器重启以后wifi不见了
  • ant design vue vue3
  • 小刺猬 (© lorenzo104/Getty Images)
  • 一般经营循环资金周转量为负数
  • 工费经费的计税依据要扣除含税部分吗
  • vue框架总结
  • 出售长期股权投资的交易费用
  • 前端传给后端
  • 学会这两种方式英语
  • 股东转让股份会退股吗
  • 企业注销时实收资本清算时要作资产处置收益交所得税吗
  • 航天金税盘维护费什么时候交
  • 个人所得税法实施细则2023
  • 一般纳税人普通发票做账
  • wordpress怎么安装插件
  • 尾款忘记支付,交易关闭怎么办
  • 总公司所得税汇算
  • 开具增值税专用发票是什么意思
  • 非营利企业的劳动力需求有哪些特点
  • 工程结算属于哪类账户
  • 累计折旧贷方余额怎么算
  • 会计核算的内容包括
  • 企业录用失业人员补贴
  • 可以先注销银行信用卡吗
  • 银行承兑汇票的承兑人
  • MySQL的存储过程保存在哪里
  • 怎么把操作系统转移到另一个盘
  • bios怎么调高性能
  • vista和win10
  • centos 7安装桌面
  • window8怎么样
  • Win8/8.1下通过dism命令解压install.wim文件步骤
  • windows7怎
  • win7怎么打开u盘里的的另一个U盘
  • 字符串反转C语言代码
  • ntp配置详解
  • python编码函数
  • 类似愤怒小鸟的小游戏
  • JavaScript实现同时调用多个函数的方法
  • jquery和css的区别
  • js创建对象的方法有哪些
  • 微信气泡png
  • 网上办税如何打印电子凭证
  • blueerdos和鄂尔多斯区别
  • 集美区区委书记什么级别
  • 南通开发区地图高清版
  • 两利四率完成情况
  • 广东省东莞市电子税务局官网
  • 财政部国家税务总局2021年40号
  • 云南 过年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设