javascript学习（三）——常用方法(1)

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量74 收藏
点赞数
文章标签： javascript xhtml java ViewUI

javascript是一个让人爱恨纠结的语言，不过如果你知道javascript的发明者只用了10天来发明它，也许你就不那么纠结了（JavaScript诞生记）。

一、js获取页面高度

<script> function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; s += " 网页被卷去的高(ff)："+ document.body.scrollTop; s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; s += " 网页被卷去的左："+ document.body.scrollLeft; s += " 网页正文部分上："+ window.screenTop; s += " 网页正文部分左："+ window.screenLeft; s += " 屏幕分辨率的高："+ window.screen.height; s += " 屏幕分辨率的宽："+ window.screen.width; s += " 屏幕可用工作区高度："+ window.screen.availHeight; s += " 屏幕可用工作区宽度："+ window.screen.availWidth; s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; } </script>

其他补充说明：点击打开链接

二、密码检测

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <script type="text/javascript"> function CheckPassword(PasswordValue){ var n=0,msg; if (/\d/.test(PasswordValue)) n ++; //包含数字 if (/[a-z]/.test(PasswordValue)) n ++; //包含小写字母 if (/[A-Z]/.test(PasswordValue)) n ++; //包含大写字母 if (/\W/.test(PasswordValue)) n ++; //包含其他字符 if (PasswordValue.length< 5) n=0; //长度小于5位 switch(n){ case 0 : msg=" 密码长度至少6位"; break; case 1 : msg=" 很弱"; break; case 2 : msg=" 中等"; break; case 3 : msg=" 高级"; break; case 4 : msg=" 安全级"; break; } return msg; } function GetPwdMsg(){ //alert(CheckPassword(document.getElementById("Text1").value)); document.getElementById("showPwdMsg").innerHTML=CheckPassword(document.getElementById("Text1").value); } </script> </head> <body> <input id="Text1" type="text" οnkeyup="GetPwdMsg()" /> <span id="showPwdMsg"></span> </body> </html>

三、禁止文本框输入文字的四种常用方法

<div>方法一：<input type="text" value="禁止文本框输入" οnclick="alert(this.value);" οnfοcus="this.blur()" /></div> <div>方法二：<input type="text" value="禁止文本框输入" οnclick="alert(this.value);" readonly /> </div> <div>方法三：<input type="text" value="禁止文本框输入" οnclick="alert(this.value);" disabled /> </div> <div>方法四：<input type="text" value="禁止文本框输入" disabled="disabled"/> </div>


四、倒计时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <title>实时倒计时</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> </head> <body> <!--单位：秒--> 剩余时间：<span id="endtime">10</span> <script type="text/javascript"> var CID = "endtime"; if(window.CID != null) { var iTime = document.getElementById(CID).innerText; var Account; RemainTime(); } function RemainTime() { var iDay,iHour,iMinute,iSecond; var sDay="",sHour="",sMinute="",sSecond="",sTime=""; if (iTime >= 0) { iDay = parseInt(iTime/24/3600); if (iDay > 0) { sDay = iDay + "天"; } iHour = parseInt((iTime/3600)%24); if (iHour > 0){ sHour = iHour + "小时"; } iMinute = parseInt((iTime/60)%60); if (iMinute > 0){ sMinute = iMinute + "分钟"; } iSecond = parseInt(iTime%60); if (iSecond >= 0){ sSecond = iSecond + "秒"; } if ((sDay=="")&&(sHour=="")){ sTime="<span style='color:darkorange'>" + sMinute+sSecond + "</font>"; } else { sTime=sDay+sHour+sMinute+sSecond; } if(iTime==0){ clearTimeout(Account); sTime="<span style='color:green'>时间到了！</span>"; } else { Account = setTimeout("RemainTime()",1000); } iTime=iTime-1; } else { sTime="<span style='color:red'>倒计时结束！</span>"; } document.getElementById(CID).innerHTML = sTime; } </script> </body> </html>


五、全日制时间显示

<html> <head> <title>最简单的全日制时间显示，代码非常简单</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id="linkweb"> </div> <script>setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> </body> </html>


六、弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <script type="text/javascript"> //弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth+"px"; if(document.body.offsetHeight > document.documentElement.clientHeight){ document.getElementById(bg_div).style.height = document.body.offsetHeight+"px"; } else{ document.getElementById(bg_div).style.height = document.documentElement.clientHeight+"px"; } }; //关闭弹出层 function CloseDiv(show_div,bg_div) { document.getElementById(show_div).style.display='none'; document.getElementById(bg_div).style.display='none'; }; </script> <style type="text/css"> .pop_div4{margin-bottom:3px;display:none;position:absolute;background:#FFF;top: 35%;left: 35%;width: 30%;border:solid 1px #6e8bde;z-index:1002;} .pop_div4 .title{color:#FFF;cursor:default;height:18px;font-size:14px;font-weight:bold;text-align:left;padding-left:8px;padding-top:4px;padding-bottom:2px;background-color:#6e8bde;} .pop_div4 .content{ clear:both; margin:4px; padding:2px; } .Mask_div2{display: none; position: absolute; background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.30;filter: alpha(opacity=80); top: 0%; left: 0%; } </style> </head> <body> <input id="Button2" type="button" value="button" οnclick="ShowDiv('pop_div','Mask_div');"/> <div id="pop_div" class="pop_div4"> <div class="title">弹出层</div> <div class="content"> 正文内容 </div> <div style="text-align: right; height:30px; padding-bottom:5px;"> <input value="Close" id="Button1" οnclick="CloseDiv('pop_div','Mask_div');" type="button" /> </div> </div> <div id="Mask_div" class="Mask_div2"></div> </body> </html>

在写弹出层的过程中，遇到一个比较纠结的事情，一开始弹出层的JS代码试这么写的

//弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth; document.getElementById(bg_div).style.height = document.body.offsetHeight; };

却发现这个在IE里面没有问题，到了谷歌火狐，宽度怎么也加不上，始终不明白是什么原因，使用了各种获取网页高度宽度的办法，始终不行。后来发现获取网页高度宽度没有问题，问题出在赋值的时候。就让我更纠结了，这种W3C标准的属性，谷歌和火狐不应该会不支持的啊。

最后突然想到会不会是宽度没有单位的原因，修改如下，果然OK：

//弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth+"px"; if(document.body.offsetHeight > document.documentElement.clientHeight){ document.getElementById(bg_div).style.height = document.body.offsetHeight+"px"; } else{ document.getElementById(bg_div).style.height = document.documentElement.clientHeight+"px"; } };


七、浏览器类型判断

<script language="JavaScript"> <!-- function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } alert("您的浏览器类型为:"+getOs()); --> </script>


1、判断浏览器是否为IE
document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。
navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。
2、判断IE版本
navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6；
navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'：同上；
navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE7；
navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version'：同上；
navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE8；
navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version'：同上。
3、JS获取浏览器信息
浏览器代码名称：navigator.appCodeName
浏览器名称：navigator.appName
浏览器版本号：navigator.appVersion
对Java的支持：navigator.javaEnabled()
MIME类型（数组）：navigator.mimeTypes
系统平台：navigator.platform
插件（数组）：navigator.plugins
用户代理：navigator.userAgent
4、判断是否IE浏览器之最短的js代码

<script> if(!+[1,])alert("这是ie浏览器"); 　　 else alert("这不是ie浏览器"); </script>


八、火狐浏览器支持window.event


<script type="text/javascript"> if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) { var _E = function(){ var c=_E.caller; while(c.caller)c=c.caller; return c.arguments[0] }; __defineGetter__("event", _E); } </script>



PS：我将不定时在该文章中新增一些常用的JS方法，有些是自己写的，也有来源于网络（可能出处无法考证，所以就不贴来源了，不消息侵犯你的版权了，请联系我，我将及时扯下相关代码）。

iteye_1468
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中函数的三种定义方法
我要学技术！
04-03 1万+
本文整理了JavaScript中函数定义的三种方法。 函数的三种定义方法分别是：函数定义语句、函数直接量表达式和Function()构造函数的方法。下面依次介绍这几种方法具体怎么实现。 1. 函数定义语句 //求和函数 function sum(a,b){ return a+b; }这是最典型的函数声明，以关键字function开始，其后跟随函数名称标识符、一对圆括号（包含由0个或多个逗号
div弹出层
春天
11-27 517
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .wh
JavaScript 学习笔记 ——document
我有两颗糖
02-20 5909
1. 浏览器环境 JavaScript 语言最初是为 Web 浏览器创建的。此后，它已经发展成为一种具有多种用途和平台的语言。 下面是 JavaScript 在浏览器中运行时的鸟瞰示意图： windows 是根对象，它充当 JavaScript 的全局对象以及代表着浏览器窗口，提供控制浏览器窗口的方法。 1.1 DOM 文档对象模型 DOM 将所有页面内容表示为可以修改的对象，document 是页面的入口，可以利用它修改创建 HTML 的内容，可以参考 DOM： document.bodyDOM.st
JavaScript学习记录——DOM部分
spring0205的博客
04-07 919
JavaScript学习记录——DOM部分
web前端学习（三十一）——初识JavaScript
★★光亭★★
02-11 1万+
web前端学习（三十一）——初识JavaScript
javascript学习（三）——常用方法(2)
冰风On The Way
12-28 3019
一、兼容性较高的浏览器页面关闭 //关闭网页,不支持火狐(火狐返回上次浏览页面） //FireFox非window.open()等弹出页面，需要在地址栏中输入about:config， 然后将dom.allow_script_to_close_windows改为true才能达到想要的效果。 function CloseWebPage() { if (navigator.userAg
Javaweb学习笔记——JavaScript常用知识汇总
董兰天同學的博客
04-24 377
JavaScript事件处理 JavaScript常用对象Windows对象常用属性Windows对象的方法Windows窗口设置 JavaScript可选参数String 对象常用方法 JavaScript Date对象方法 DOM Node对象的属性节点类型等属性常用方法
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 6482
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
JavaScript—— 常见网页特效
weixin_61920612的博客
04-17 8316
JavaScript—— 常见网页特效
web学习笔记 —— javascript基础
05-25
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的编程语言，主要负责客户端的动态交互。...无论你是初学者还是有一定经验的开发者，这份笔记都将为你的JavaScript学习之路提供宝贵的指导。
javascript 学习之旅 （1）
12-04
进入JavaScript的核心——语法部分。首先，字符串是编程中常见的一种数据类型，它可以由单引号或双引号包围。推荐使用双引号，因为这样在字符串中嵌入变量时可以避免额外的转义。例如，`var mood = "happy";` 创建了...
JavaScript该如何学习 怎样轻松学习JavaScript
10-19
学习方法上，建议选择高质量的国外教材，如《JavaScript DOM编程艺术》、《JavaScript权威指南》等，反复练习书中的示例，加深理解。从不同角度理解和实现同一功能，比如从面向过程到面向对象的转换，甚至将其封装...
浅析JavaScript中的常用算法与函数
10-26
接下来，我们讨论JavaScript中的基本数据结构——数组： 6. **声明数组**： 有多种方式创建数组，如`new Array()`、`new Array元素列表`或直接用方括号`[]`定义数组。例如，`var array1 = new Array();`创建一个空...
Python常用内建模块-学习笔记共8页.pdf.zip
11-22
本学习笔记将深入探讨Python的一些常用内建模块，帮助你更好地理解和利用这些工具来提升开发效率。 1. **内置模块介绍** Python的内建模块包括`sys`、`os`、`math`、`random`、`time`、`json`、`re`等，它们覆盖了...
JavaWeb学习笔记——javascript
热门推荐
MCC
12-17 1万+
javascript基本语法script标签引入js代码变量比较运算逻辑运算数组函数第一种方式第二种方式隐式参数arguments自定义对象{ }形式Object形式事件onload静态注册动态注册onclickonbluronchange静态绑定动态绑定onsubmitDOM对象getElementById()getElementByNamegetElementByTagNamedom对象的属性正则表达式 基本语法 script标签 alert()：警告框函数，传入的参数是警告框内要显示的信息 <!
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1004
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 218
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1003
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
实验3：扩展JavaScript框架应用——基于Java的JDBC数据库交互
1. 掌握扩展的JavaScript框架：通过实际操作，学习如何利用JavaScript框架增强Web应用的功能和用户体验，例如EasyUI和jQuery。EasyUI提供了一套丰富的UI组件，而jQuery则简化了DOM操作和AJAX交互。 2. 熟悉EasyUI...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值