随笔分类 - Javascript练习题
Javascript练习题
摘要：提示框功能：当鼠标指向头像时，弹出一个信息框，鼠标可移动到信息框，当鼠标离开头像时信息框消失，当鼠标离开信息框时信息框消失。实现功能思路：1、获取元素。2、当鼠标指向Div1时，Div2显示。3、当鼠标离开Div1时，使Div2延迟0.5秒消失，这样以便有时间把鼠标移到Div2。4、当鼠标指向Div2时，Div2显示。因为第3步设置setTimeout使Div2消失，所以把用clearTimeout()把setTimeout清除了就可以实现Div2显示了。5、当鼠标离开Div2时，使Div2延迟0.5秒消失，这样以便有时间把鼠标指向Div1。6、第2步已经设置了鼠标指向Div1，Div2就显示
阅读全文
摘要：日历描述：有12个月，鼠标指向哪个月就会在下方显示月数和当月活动。思路：1、获取元素。2、用数组定义月份内容3、for循环历遍li元素添加鼠标指向事件。4、for循环历遍li元素去掉li样式。5、为当前li元素添加样式。6、用innerHTML追加当前月份内容。JS代码： 1 <script> 2 var neirong=['一','二','三','四','五','六','七','八','九','十','十一'
阅读全文
摘要：思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。HTML代码： 1 <div
阅读全文
摘要：思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过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
阅读全文
摘要：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;
阅读全文
摘要：思路：1、首先用把密码框用txt暂时替代，并赋上默认值 <input type="text" value="请输入密码" /> 2、当文本框获取焦点后，把默认值清空，把type改为password。 3、当文本框失去焦点后，把type改为txt，把默认值设为“请输入密码”。JS代码： 1 window.onload=function(){ 2 3 var input=document.getElementById('input'); 4 5 input.onfocus=function(){ 6 7 if(this.value
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
摘要：1、创建一个clock对象的函数，带三个属性：seconds minutes hours。2、写两个方法：seTime()用来设置当前时间，displayTime()用了显示时间。3、提示用户选择a.m/p.m。用户的选择将作为参数传递给displayTime()方法。4、输出如下格式的效果：14：10：26或2：10:26 PM，具体哪种输出效果取决于display()方法的参数。<script type=text/javascript>function clock(){//对象函数this.seconds=0;//三个属性 时\分\秒this.minutes=0;this.ho
阅读全文
摘要：编写一个函数计算小费，小费为总账单的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
阅读全文
摘要：要求用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
阅读全文