js的常见写法技巧

时间 2019-11-19

原文原文链接

Javascript练习题

摘要: View Code <!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><meta http-equiv="Content-Type" content="text/html; ch 阅读全文

posted @ 2013-04-23 17:59 yexingwen 阅读(1178) | 评论 (0) 编辑

过滤HTML标签

posted @ 2013-04-23 17:55 yexingwen 阅读(460) | 评论 (0) 编辑

敏感词过滤

posted @ 2013-04-23 17:54 yexingwen 阅读(382) | 评论 (0) 编辑

cookie记录用户名

摘要: cookie思路：当点击登陆按钮时，把cookie存起来，再次访问的时候就读取cookie，即把txt的value设置以前存起来cookie的值就行。View Code <!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& 阅读全文

posted @ 2013-04-23 16:08 yexingwen 阅读(372) | 评论 (0) 编辑

摘要: cookie设置过时时间要先获取当前的时间日期再加上过时时间就行。如：var oDate=new Date();oDate.setDate(oDate.getDate()+7); //设置过时时间document.cookie='user=admin;password=123546;expires='+oDate; 阅读全文

posted @ 2013-04-23 14:20 yexingwen 阅读(158) | 评论 (0) 编辑

运行代码

摘要: View Code window.onload=function(){ var txt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); oBtn.onclick=function() { var oWindow=window.open('about:blank','_blank'); oWindow.document.write(txt.value); txt.value=''; };}; 1 <!DOCTYPE 阅读全文

posted @ 2013-04-12 17:47 yexingwen 阅读(213) | 评论 (0) 编辑

面向对象改为拖拽和经过继承来达到限制范围拖拽

摘要: View Code 1 window.onload=function() 2 { 3 new Drag('div1'); 4 new LimitDrag('div2'); 5 }; 6 7 function Drag(id) 8 { 9 this.disX=0;10 this.disY=0;11 var _this=this;12 this.oDiv=document.getElementById(id);13 14 this.oDiv.onmousedown=function(ev)15 {16 _t... 阅读全文

posted @ 2013-04-11 17:47 yexingwen 阅读(220) | 评论 (0) 编辑

JS鼠标拖拽

摘要: JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oDiv=document.getElementById('div'); 5 var disX=0; 6 var disY=0; 7 8 oDiv.onmousedown=function(ev) //鼠标按下DIV 9 {10 var oEvent=ev||event;11 disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距... 阅读全文

posted @ 2013-03-29 12:12 yexingwen 阅读(630) | 评论 (0) 编辑

只能输入数字的文本框

摘要: JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt=document.getElementById('txt'); 5 oTxt.onkeydown=function(ev) 6 { 7 var oEvent=ev||event; 8 //alert(oEvent.keyCode); 9 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) //oEvent.k... 阅读全文

posted @ 2013-03-28 16:23 yexingwen 阅读(283) | 评论 (1) 编辑

禁止鼠标右键菜单，本身制做右键菜单

摘要: JS代码：View Code 1 <script> 2 function getPosition(ev) //获取页面到鼠标点的X Y坐标 3 { 4 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 5 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 6 return{x: scrollLeft+ev.clientX,y: scrollTop+ev.clien... 阅读全文

posted @ 2013-03-28 15:46 yexingwen 阅读(213) | 评论 (0) 编辑

Crtl+Enter提交留言

摘要: Crtl+Enter提交留言代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt1=document.getElementById('txt1'); 5 var oTxt2=document.getElementById('txt2'); 6 7 oTxt1.onkeydown=function(ev) 8 { 9 var oEvent=ev||event;10 if(oEvent.keyCode==13 && oEvent.ctrlKey)11 ... 阅读全文

posted @ 2013-03-28 11:29 yexingwen 阅读(139) | 评论 (0) 编辑

JS实现微博发布消息

摘要: 效果:发布时高度慢慢增大，透明度也同时变为100思路：一、建立li二、li的值是从文本框获取的 li.innerHtml=txt.value;三、清空文本框 txt.value='';四、if判断若是没有内容的时候就appendChild插入，若是有内容就倒序插入。五、用offsetHeight获取 li高度，先把li高度设置为0，再经过运动框架设置li高度和透明度JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oUl=document.getElementById('ul' 阅读全文

posted @ 2013-03-22 17:49 yexingwen 阅读(308) | 评论 (0) 编辑

JS实现淘宝幻灯片效果

摘要: 淘宝幻灯片效果：能自动播放，鼠标指向或者点击数字按钮就能切换图片。实现思路：一、for循环给数字按钮加上点击事件。2.for循环先把按钮的样式清空，再把当前样式设置样式。三、给每一个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应，用运动框架把大图的UL每次移动-150px，由于图片高度是150px。若是移动到第n张图片就是-150*n。四、定义变量now，用来自动播放用的。把当前图片赋值给now now=this.index。五、定义自动播放函数。now++ 下一张，if判断，到最后一张图片的时候就把now设置为0，就是第一张。 i 阅读全文

posted @ 2013-03-22 16:03 yexingwen 阅读(367) | 评论 (0) 编辑

JS仿Flash图片切换效果

摘要: 效果：一、上面大图鼠标移到左边就过渡显示左边的按钮，鼠标移到右边就过渡显示右边的按钮。二、点击下方缩略图时大图就切换为相应的并有一个拉窗帘的效果。三、缩略图有透明度，鼠标移入缩略图就不透明。四、按大图按钮切换图片，缩略图会相应切换。五、自动播放，当图片播放到最后一张时自动返回从第一张开始。实现思路：1、大图左右按钮：一、在大图上弄2个遮罩层，opacity透明度设置为0，当鼠标移出左边或者右边的运动框架时，经过运动框架使按钮 opacity从0变为100，鼠标移出时就把opacity从100变为0二、按钮opacity透明度设置为0，鼠标移出按钮时经过运动框架使按钮 opacity从0变为100，阅读全文

posted @ 2013-03-19 11:49 yexingwen 阅读(363) | 评论 (0) 编辑

封装getByClass函数

摘要: function getByClass(oParent, sClass) //两个形参，第一个对象oParent 第二个样式名class{ var aEle=oParent.getElementsByTagName('*'); //从对象里选择全部元素 var aResult=[]; //空数组 for(var i=0;i<aEle.length;i++) //历遍全部oParent元素里面的全部元素 { if(aEle[i].className==sClass) //当有oParent元素里面的元素类名和传进来的类名是同样的 { aResult.push(aEle[i] 阅读全文

posted @ 2013-03-19 09:17 yexingwen 阅读(164) | 评论 (0) 编辑

任意值运动框架

摘要: 任意值运动框架思路：一、任意值运动框架带有3个形参，第一个是obj对象，第二个是attr属性，第三个是iTarget对象运动的目标值。二、清除当前对象的定时器 clearInterval(obj.timer)三、设置定时器 obj.setInterval(function(){},30)3.一、定义一个空的cur用来设置当前属性。3.二、由于有时候是opacity透明度运动，因此就要用if else加一个判断1 if(attr=='opacity'){2 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要阅读全文

posted @ 2013-03-18 16:31 yexingwen 阅读(137) | 评论 (0) 编辑

JS多个DIV变宽

摘要: 思路：有多个物体运动时，当切换到另一个时就要把当前物体运动的定时器关闭运动框架：一、先关闭当前DIV的定时器 clearInterval(obj.timer)二、开启当前DIV的定时器obj.timer=setInterval()2.一、定义物体运动的速度。速度等于目标(形参)减去当前DIV的宽度 obj.offsetWidth2.二、用三目运算符把速度向上取整Math.ceil()和向下取整Math.floor()2.三、用if判断，当当前DIV宽度等于目标值(iTarget)就清除当前DIV的定时器clearInterval(obj.timer)，不然else就设置DIV的宽度等于当前D 阅读全文

posted @ 2013-03-15 16:45 yexingwen 阅读(566) | 评论 (0) 编辑

匀速运动中止

摘要: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} 8 #div2 {width:1px; height:300px; position:absolute; left:30 阅读全文

posted @ 2013-03-15 11:25 yexingwen 阅读(113) | 评论 (0) 编辑

createElement建立元素

摘要: 建立元素是用createElement,先把建立的元素赋值给一个变量，再把这个变量插入到文档元素中。末尾插入元素是用：appendChild appendChild的形式是：父级.appendChild(子节点)，把子节点插入到父级下的末尾。insertBefore:在父级以前插入子节点，形式：父级.insertBefore(子节点,在谁以前)removeChild:从父级删除一个子节点，形式父级.appendChild(removeChild)正常顺序插入Li 和倒序插入LI代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 阅读全文

posted @ 2013-03-05 17:42 yexingwen 阅读(159) | 评论 (0) 编辑

JS无缝滚动

摘要: 思路：一、获取元素。二、要使图片动起来就是用setInterval来改变，如往左边滚动就改变offsetLeft，把图片的左边距改成负数。三、当图片往左滚的时候，右边就会出现空白，这时候须要用innerHTML复制原来的4个li 造成8个li四、就算有8个li，但总会有滚到尽头的时候，这时就作一个判断当offsetLeft大于ul宽度的一半时，把ul拉回来0的位置（往左滚）。五、当offsetLeft大于0时，就把Left设置为负ul 宽度的一半。（往右滚）六、鼠标指向图片，图片中止。七、鼠标离开图片，图片继续滚动。八、往左滚往右滚就是控制offsetLeft，负数就是向左滚，正数就是向右滚阅读全文

posted @ 2013-03-04 17:35 yexingwen 阅读(232) | 评论 (0) 编辑

JS延时提示框

摘要: 提示框功能：当鼠标指向头像时，弹出一个信息框，鼠标可移动到信息框，当鼠标离开头像时信息框消失，当鼠标离开信息框时信息框消失。实现功能思路：一、获取元素。二、当鼠标指向Div1时，Div2显示。三、当鼠标离开Div1时，使Div2延迟0.5秒消失，这样以便有时间把鼠标移到Div2。四、当鼠标指向Div2时，Div2显示。由于第3步设置setTimeout使Div2消失，因此把用clearTimeout()把setTimeout清除了就能够实现Div2显示了。五、当鼠标离开Div2时，使Div2延迟0.5秒消失，这样以便有时间把鼠标指向Div1。六、第2步已经设置了鼠标指向 Div1，Div2就显示阅读全文

posted @ 2013-03-01 11:46 yexingwen 阅读(1527) | 评论 (0) 编辑

JS制做简易日历

摘要: 日历描述：有12个月，鼠标指向哪一个月就会在下方显示月数和当月活动。思路：一、获取元素。二、用数组定义月分内容三、for循环历遍li元素添加鼠标指向事件。四、for循环历遍li元素去掉li样式。五、为当前li元素添加样式。六、用innerHTML追加当前月分内容。JS代码： 1 <script> 2 var neirong=['一','二','三','四','五','六','七','八','九','十','十一' 阅读全文

posted @ 2013-02-27 20:53 yexingwen 阅读(3095) | 评论 (0) 编辑

JS实现选项卡

摘要: 思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容经过display(block none)来实现切换的。一、首先获取元素。二、for循环历遍按钮元素添加onclick 或者 onmousemove事件。三、由于点击当前按钮时会以高亮状态显示，因此要再经过for循环历遍把全部的按钮样式设置为空和把全部DIV的 display设置为none。四、把当前按钮添加样式，把当前DIV显示出来，display设置为block。注：给多个元素添加多个事件要用for 循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，因此要用2个for循环历遍。HTML代码： 1 <div 阅读全文

posted @ 2013-02-27 17:12 yexingwen 阅读(9183) | 评论 (0) 编辑

JS实现全选、不选、反选

摘要: 思路：一、获取元素。二、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。三、经过if判断，若是checked为true选中状态的，就把checked设为false不选状态，若是checked为 false不选状态的，就把checked设为true选中状态。JS代码： 1 <script> 2 window.onload=function(){ 3 var CheckAll=document.getElementById('All'); 4 var UnCheck=docum 阅读全文

posted @ 2013-02-27 11:06 yexingwen 阅读(14484) | 评论 (1) 编辑

JS点击显示隐藏内容

摘要: JS点击显示隐藏密码思路：获取元素，判断点击，若是DIV显示就隐藏，若是DIV隐藏就显示出来。1 if(DIV是显示的){2 div.style.display='none';3 }4 else{5 div.style.display='block'; 6 }代码：style:1 <style>2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}3 #menu{display:none;width:300px;height:100px; 阅读全文

posted @ 2013-02-26 21:45 yexingwen 阅读(18028) | 评论 (0) 编辑

JS控制密码框获取焦点时文字消失，失去焦点时文字出现

摘要: 思路：一、首先用把密码框用txt暂时替代，并赋上默认值 <input type="text" value="请输入密码" /> 二、当文本框获取焦点后，把默认值清空，把type改成password。三、当文本框失去焦点后，把type改成txt，把默认值设为“请输入密码”。JS代码： 1 window.onload=function(){ 2 3 var input=document.getElementById('input'); 4 5 input.onfocus=function(){ 6 7 if(this.value 阅读全文

posted @ 2013-02-26 12:16 yexingwen 阅读(3940) | 评论 (0) 编辑

验证是否为空

摘要: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; c 阅读全文

posted @ 2012-08-16 16:20 yexingwen 阅读(148) | 评论 (0) 编辑

用src属性动态替换图片；图片预加载---鼠标事件实现图片翻转效果；随机显示图片和onClick事件

posted @ 2012-08-16 16:13 yexingwen 阅读(351) | 评论 (0) 编辑

带控制按钮的简单幻灯片

摘要: 1 <html> 2 <head> 3 <script type="text/javascript"> 4 /******************************************带控制按钮的简单幻灯片*********************************************/ 5 var i=0; //定义全局变量i timeout 6 var timeout; 7 function preLoadImages(){ //建立预加载函数数组，数组由3张图片 8 Planet=new Array(); 9 P 阅读全文

posted @ 2012-08-16 16:02 yexingwen 阅读(183) | 评论 (0) 编辑

建立clock对象的函数

摘要: 一、建立一个clock对象的函数，带三个属性：seconds minutes hours。二、写两个方法：seTime()用来设置当前时间，displayTime()用了显示时间。三、提示用户选择a.m/p.m。用户的选择将做为参数传递给displayTime()方法。四、输出以下格式的效果：14：10：26或2：10:26 PM，具体哪一种输出效果取决于display()方法的参数。<script type=text/javascript>function clock(){//对象函数this.seconds=0;//三个属性时\分\秒this.minutes=0;this.ho 阅读全文

posted @ 2012-08-08 08:55 yexingwen 阅读(152) | 评论 (0) 编辑

编写一个函数计算小费，小费为总帐单的20%

摘要: 编写一个函数计算小费，小费为总帐单的20%<script type=text/javascript>function tip(total){ return total*0.2;};var givetotal=prompt("总帐单是多少元","")-0;if (isNaN(givetotal)){ alert("只能输出数字");}else if(givetotal==""){ alert("不能为空");}else{ var tip=tip(givetotal); alert(&q 阅读全文

posted @ 2012-08-07 11:38 yexingwen 阅读(218) | 评论 (0) 编辑

switch语句重写if语句

摘要: 要求用switch重写if else if else语句，要求提示用户输入月份，而不是直接赋值。原代码：<script type=text/javascript>month=8;if(month==1){ alert("January");else if(month==8){ alert("August");}else{ alert("没有合适的条件")}</script>重写后代码：<script type=text/javascript>var month=parseInt(prompt(&qu 阅读全文