适用于您网站的15免费JavaScript示例片段

文章撰写者:
  • 推荐文章
  • 更新:Sep 23,2019

JavaScript是 这些天在网上无处不在 –改善网站互动性,验证信息和/或改善网站前景。

JavaScript最早出现在1995中,从那时起,在接受度和使用方式上已经走了很长一段路。 JavaScript中使用的语法受到C语言的强烈影响; 但是Java,Pearl,Python和Scheme也发挥了作用。

JavaScrip初学者提示:您需要了解什么?

首先,您需要了解的一些基础知识是:

  • 可以在浏览器中关闭JavaScript
  • 每次加载页面时都会运行JavaScript
  • JavaScript需要时间来加载慢速Internet连接
  • JavaScript仍然来自缓存页面
  • 您可以在网页中或从.js文件外部托管JavaScript
  • JavaScript与Java完全不同

同样重要的是要了解,如果以错误的方式使用JavaScript,实际上会导致灾难。

配置不当且编码不正确的JavaScript会减慢您的网站速度,并损害整个网站的导航。 反过来,这会影响访问者的返回率(由于不良的用户体验)以及搜索引擎排名(由于网站响应率降低和漫游器爬行)。 为了在这里验证我的案子,请让自己成为观众。 如果您访问的网站加载缓慢,导航困难,并且总体上没有吸引力,您是否会返回该网站? 我不会

以下是向其中添加JavaScript时要考虑的一小件事 你的网页.

  • 网站是否需要JavaScript才能正常运行?
  • 如果JavaScript被阻止,网站会是什么样子?
  • JavaScript会损害服务器性能吗?
  • 添加JavaScript帮助会将您的网站移动到您想要的方向吗?

不,我不是要吓these这些观点。

实际上,不要害怕 在您的网站上使用JavaScript 因为它提供了很多好处,并且如上所述,大多数人都在使用它。 我试图在这里讲解的重点是,不要在不必要的时候继续向网站添加JavaScript功能。 与其他网站相比,某些网站需要更多的JavaScript; 有些只需要更少–仅仅因为一个站点正在做并不意味着您应该做同样的事情。

免费赠品:15 Cool JavaScript Snippets为您的网站

现在,让我们来看看你来到这里的东西 - 下面是一个15 JavaScript代码片段列表,它将在功能或外观方面增强你的网站。 代码将分为两部分,head和body或.js文件。 如果没有给出部分标题,那么该特定片段不需要它。

1。 了解HTML5视频

快速样品

<script type =“ text / javascript”>函数谅解视频(){return !! document.createElement('video')。canPlayType; // boolean} if(!understands_video()){//必须是较旧的浏览器或IE。 //也许做一些事情,例如隐藏自定义// HTML5控件。 或其他... videoControls.style.display ='none'; } </ script>

JavaScript代码段的作用是什么?

这个小小的代码片段会阻止您的网站尝试显示浏览器无法支持的视频,从而节省带宽和处理能力。

2。 JavaScript Cookies

快速样品

<script type =“ text / javascript”> / ** *设置具有给定名称和值的Cookie。 * *名称cookie的名称*值cookie的值* [expires] cookie的到期日期(默认值:当前会话的结束)* [path] cookie有效的路径(默认值:调用文档的路径)* [域] cookie有效的域*(默认值:调用文档的域)* [安全]布尔值,指示cookie传输是否需要*安全传输* /函数setCookie(名称,值,到期时间,路径,域,安全) {document.cookie = name +“ =” + escape(value)+((expires)?“; expires =” + expires.toGMTString():“”)+((path)?“; path =” + path: “”)+((domain)?“; domain =” + domain:“”)+((secure)?“; secure”:“”); } </ script> <script type =“ text / javascript”> / ** *获取指定cookie的值。 * *名称所需cookie的名称。 * *返回一个包含指定cookie值的字符串;如果cookie不存在,则返回null。 * /函数getCookie(name){var dc = document.cookie; var prefix = name +“ =”; var begin = dc.indexOf(“;” +前缀); if(begin == -1){begin = dc.indexOf(prefix); 如果(开始!= 0)返回null; } else {开始+ = 2; } var end = document.cookie.indexOf(“;”,开始); if(end == -1){end = dc.length; } return unescape(dc.substring(begin + prefix.length,end)); } </ script> <script type =“ text / javascript”> / ** *删除指定的cookie。 * *名称cookie的名称* cookie的[path]路径(必须与用于创建cookie的路径相同)* cookie的[domain]域(必须与用于创建cookie的域相同)* /函数deleteCookie(名称,路径,域){如果(getCookie(name)){document.cookie =名称+“ =” +((路径)?“; path =” +路径:“”)+((域)?“;域=“ + domain:”“)+”; expires =星期四,01-Jan-70 00:00:01 GMT“; }} </ script>

JavaScript代码段的作用是什么?

这个片段有点长但非常有用,它允许您的网站在查看者的计算机上存储信息,然后在另一个时间点读取它。 此代码段可以以多种不同方式使用,以完成不同的任务。

3。 预加载图片

快速样品

<script type =“ text / javascript”> var images = new Array(); 函数preloadImages(){for(i = 0; i <preloadImages.arguments.length; i ++){images [i] = new Image(); images [i] .src = preloadImages.arguments [i]; }} preloadImages(“ logo.jpg”,“ main_bg.jpg”,“ body_bg.jpg”,“ header_bg.jpg”); </ SCRIPT>

JavaScript代码段的作用是什么?

此代码段将阻止您的网站在仅显示网站的一部分时遇到尴尬的时间; 这不仅看起来很糟糕,而且也是不专业的。 您所要做的就是将图像添加到preloadImages部分,然后就可以滚动了。

4。 电子邮件验证

快速样品

头:

<script type =“ text / javascript”>函数validateEmail(theForm){if(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)){return(true); } alert(“无效的电子邮件地址!请再次输入!!”); 返回(假); } </ script>

身体:<form onSubmit =“返回validateEmail(this);” action =“”>电子邮件地址:<input type =“ text” name =“ emailid” /> <input type =“ submit” value =“ Submit” /> <input type =“ reset” value =“重置” /> </ form>

JavaScript代码段的作用是什么?

此代码段将验证是否以表格形式输入了格式正确的电子邮件地址,它不能保证该电子邮件地址是真实的,因此无法使用JavaScript进行检查。

5。 没有右键单击

快速样品

<script type =“ text / javascript”>函数f1(){if(document.all){返回false; }}函数f2(e){if(document.layers ||(document.getElementById&!document.all)){if(e.which == 2 || e.which == 3){返回false; }}} if(document.layers){document.captureEvents(Event.MOUSEDOWN); document.onmousedown = f1; } else {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = new function(“ return false”); </ SCRIPT>

JavaScript代码段的作用是什么?

此代码段会阻止观看者右键单击您的页面。 这可以阻止普通用户从您的网站借用图片或代码。

6。 显示随机报价

快速样品

:<script type =“ text / javascript”> writeRandomQuote = function(){var quotes = new Array(); quotes [0] =“行动是智力的真正衡量标准。” quotes [1] =“与板球相比,棒球具有更快的优势。 quotes [2] =“每一个目标,每一个行动,每一个想法,每一种感觉,无论是有意识地还是无意识地被认识,都是试图提高人们的内心平静程度。” quotes [3] =“好头和好心永远是强大的结合。” var rand = Math.floor(Math.random()* quotes.length); 文件撰写(引号[兰特]); } writeRandomQuote(); </ SCRIPT>

身体:<script type =“ text / javascript”> writeRandomQuote(); </ script>

JavaScript代码段的作用是什么?

好的,所以这不是所有网站都会使用的片段,但它可以用来显示不仅仅是随机引号。 您可以将引号的内容更改为您想要的任何内容,并在您的网站上的任何位置显示随机图像或文本。

7。 上一个/下一个链接

快速样品

<a href="javascript:history.back(1)">上一页</a> | <a href="javascript:history.back(-1)">下一页</a>

JavaScript代码段的作用是什么?

如果您在文章或教程中有多个页面,则此片段非常有用。 它将允许用户轻松浏览页面。 从资源的角度来看,它也很小,重量轻。

8。 为页面添加书签

快速样品

<ahref="javascript:window.external.AddFavorite('http://www.yoursite.com','您的网站名称')">添加到收藏夹</a>

JavaScript代码段的作用是什么?

此代码段将允许用户轻松为您的页面添加书签; 他们只需点击链接即可。 它的小功能可以增加观众的整体体验。

9。 轻松打印页面链接

快速样品

<a href="javascript:window.print();">打印页面</a>

JavaScript代码段的作用是什么?

这个小链接将允许您的视图轻松打印您的页面。 它利用浏览器已经设置的快速打印功能,在点击之前不使用任何资源。

10。 显示格式化日期

快速样品

:<script type =“ text / javascript”>函数showDate(){var d = new Date(); var curr_date = d.getDate(); var curr_month = d.getMonth()+ 1; //月份是从零开始的变量var curr_year = d.getFullYear(); document.write(curr_date +“-” + curr_month +“-” + curr_year); } </ script>

身体:<script type =“ text / javascript”> showDate(); </ script>

JavaScript代码段的作用是什么?

此代码段允许您在网页上的任意位置显示当前日期,而无需更新。 简单地把它放在适当的位置并忘记它。

11。 逗号分隔符

快速样品

:<script type =“ text / javascript”>函数addCommas(num){num + =''; var n1 = num.split('。'); var n2 = n1 [0]; var n3 = n1.length> 1吗? '' + n1 [1]:''; var temp = /(d +)(d {3})/; while(temp.test(n2)){n2 = n2.replace(temp,``+','+''); } var out =返回n2 + n3; 文件撰写(下); } </ script>

身体:<script type =“ text / javascript”> addCommas(“ 4550989023”); </ script>

JavaScript代码段的作用是什么?

此代码段主要用于经常使用数字的网站。 这个片段将使您的数字保持全面相同。 您所要做的就是复制要添加号码的正文行,并将号码替换为您的号码。

12。 获取浏览器的显示区域

快速样品

<script type =“ text / javascript”> <!-var viewportwidth; var viewportheight; //更多符合标准的浏览器(mozilla / netscape / opera / IE7)使用window.innerWidth和window.innerHeight if(typeof window.innerWidth!='undefined'){viewportwidth = window.innerWidth,viewportheight = window.innerHeight} / / IE6处于标准兼容模式(即,以有效的doctype作为文档的第一行),否则if(typeof document.documentElement!='undefined'&& typeof document.documentElement.clientWidth!='undefined'&& document.documentElement.clientWidth != 0){viewportwidth = document.documentElement.clientWidth,viewportheight = document.documentElement.clientHeight} // IE的旧版本else {viewportwidth = document.getElementsByTagName('body')[0] .clientWidth,viewportheight = document.getElementsByTagName ('body')[0] .clientHeight} document.write('<p>您的视口宽度为'+ viewportwidth +'x'+ viewportheight +'</ p>');; //-> </ script>

JavaScript代码段的作用是什么?

此代码段允许您在视图浏览器中获取显示区域的宽度和高度。 这将使设计人员能够根据用户浏览器窗口的大小创建和使用不同的显示。

13。 重定向与可选延迟

快速样品

<script type =“ text / javascript”> setTimeout(“ window.location.href ='http://walkerwines.com.au/'”,5 * 1000); </ SCRIPT>

JavaScript代码段的作用是什么?

此代码段允许您将查看者重定向到另一个页面,并且可以选择设置延迟。 这个片段的使用非常明显,它是一个非常有价值的工具。

14。 检测iPhone

样本

<script type =“ text / javascript”> if((navigator.userAgent.match(/ iPhone / i))||(navigator.userAgent.match(/ iPod / i))){如果((document.cookie.indexOf( “” iphone_redirect = false“)== -1){window.location =” http://m.espn.go.com/wireless/?iphone&i=COMR“; }} </ script>

JavaScript代码段的作用是什么?

此代码段允许您检测您的查看器是否在iPhone或iPod上,允许您向其显示不同的内容。 这个片段对于移动市场的规模来说是非常宝贵的,它只会继续增长。

15。 将消息打印到状态栏

快速样品

<script language =“ javascript” type =“ text / javascript”> <!-window.status =“ <键入您的消息>”; //-> </ script>

JavaScript代码段的作用是什么?

这个小片段将允许您将消息打印到状态栏。 您可以在将吸引用户眼球的区域中显示最近或重要的新闻。

关于WHSR嘉宾

本文由客座撰稿人撰写。 以下作者的观点完全是他或她自己的观点,可能无法反映WHSR的观点。