js小案类
来源：互联网 发布：大数据分析预测 知乎 编辑：程序博客网 时间：2024/06/05 14:48
1.乘法口诀表
<script type="text/javascript"> document.write("<table border='1'; cellpadding='20' cellspacing='10'>"); //整个表格 for(var x=1; x<=9; x++){ document.write('<tr>');//每一行 for(var y=1; y<=x; y++){ document.write('<td>'+x+'*'+y+'='+(x*y)+'</td>' ); //每一个单元格 } for(var y=1; y<=9-x; y++){ document.write('<td> </td>' ); //每一个单元格 } document.write('</tr>'); } document.write('</table>') </script>2.选项卡方法一
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 1px solid red; display: none; } </style> </head> <body> <input type="button" value="选项1" id="btn" style='background: yellow;'/> <input type="button" value="选项2" id="btn" /> <input type="button" value="选项3" id="btn"/> <div style="display: block;">内容1</div> <div>内容二</div> <div>内容三</div> </body> <script type="text/javascript"> //需求：点击按钮要显示对应的div，让其他的按钮背景色去掉，其他的div隐藏； //关键：如何找到上一个点击的input /*分析： * 1.获取所有的按钮及元素 * 2.给每一个按钮添加点击事件 * 2.1把上一个点击按钮的背景色去掉； * 2.2把上一个点击的按钮对应的div隐藏； * 2.3给当前按钮添加背景色； * 2.4让当前点击按钮对应的div，让他显示 */ window.onload=function(){ var inputs=document.querySelectorAll('input'); var divs=document.querySelectorAll('div'); var last=inputs[0];//初始点击的按钮，没有点击 //console.log(inputs); //console.log(divs); for(var i=0;i<inputs.length;i++){ inputs[i].index=i;//给每一个按钮加一个自定义属性，存的是他们对应的索引值 inputs[i].onclick=function(){ last.style.background='';//把上一次点击对象的背景色去掉 //console.log(last); divs[last.index].style.display='none';//上一个对应的div隐藏 this.style.background='yellow';//给当前点击的按钮加背景色 divs[this.index].style.display='block';//当前按钮对应的div显示 last=this;//把上一次点击的对象更新成当前点击的对象。 } } } </script></html>2.选项卡方法二
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 1px solid red; display: none; } </style> </head> <body> <input type="button" value="选项1" id="btn" style='background: yellow;'/> <input type="button" value="选项2" id="btn" /> <input type="button" value="选项3" id="btn"/> <div style="display: block;">内容1</div> <div>内容二</div> <div>内容三</div> </body> <script type="text/javascript"> //需求：点击按钮要显示对应的div，让其他的按钮背景色去掉，其他的div隐藏； //关键：如何找到上一个点击的input /*分析： * 1.获取所有的按钮及元素 * 2.给每一个按钮添加点击事件 * 2.1把所有按钮背景色全部清空；------------思路二 * 2.2把所有div全部隐藏；----------------思路二 * 2.3给当前按钮添加背景色； * 2.4让当前点击按钮对应的div，让他显示； */ //window.onload 页面打开事件 window.onload=function(){ var inputs=document.querySelectorAll('input'); var divs=document.querySelectorAll('div'); for(var i=0; i<inputs.length; i++){ inputs[i].index=i;//从下标去找对应的div inputs[i].onclick=function(){ for(var i=0; i<inputs.length; i++){ inputs[i].style.background=''; divs[i].style.display='none'; } //给当前点击的按钮加背景色，让对应的div显示； this.style.background='yellow'; divs[this.index].style.display='block'; } } } </script></html>3.动态图片切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" id="prev" value="上一张"/> <input type="button" id="next" value="下一张"/> <img src="img/1.jpg" alt="" style="display: block;margin-top: 20px;" id="pic"/> </body> <script type="text/javascript"> //需求;点击下一张图，让图片切成下一张； // 点击上一张图，让图片切成上一张； /*分析： * 1.获取input按钮，图片ID * 2.给按钮加点击事件 * 2.1用属性操作的方法去修改图片的src * 2.2把数字存在一个变量中，点击下一张，就让这个变量加1，用字符串拼接的方法修改src属性 */ var prev=document.getElementById('prev'); var next=document.getElementById('next'); var pic=document.getElementById('pic'); //点击事件 var n=1; next.onclick=function(){ //点击一下，让n加1 //console.log(n); n++; if(n>5){ n=5; } pic.src='img/'+n+'.jpg'; } prev.onclick=function(){ //点击一下，让n加1 n--; //console.log(n); if(n<1){ n=1; } pic.src='img/'+n+'.jpg'; } </script></html>4.文本框输出
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="提交" id="btn"/> <input type="text" id="text"/> <div id="box" style="width:200px;height: 200px; border: 1px solid red;"></div> </body> <script type="text/javascript"> //需求：点击按钮，把输入框中的内容输出到文本框中 /*分析： * 1.获取按钮，文本框，输入框 * 2.给按钮加点击事件 * 2.1获取输入内容 * 2.2把获取内容显示在box中 */ window.onload=function(){ var btn=document.getElementById('btn'); var text=document.getElementById('text'); var box=document.getElementById('box'); btn.onclick=function(){ //获取用户输入内容 var nei=text.value; //innerHTML //字符串拼接 '<p>'+nei+'</p>' //原来的内容 box.innerHTML //新输入的内容 '<p>'+nei+'</p>' var news='<p>'+nei+'</p>' /*box.innerHTML=box.innerHTML+news;*/ //新输入的在下面 box.innerHTML=news+box.innerHTML; //新输入的在上面 } } </script></html>5.循环变色
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ul{ margin: 0; padding: 0; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script type="text/javascript"> //需求：奇数一种颜色，偶数一种颜色 /*分析 * 1.获取所有的li，放在数组中 * 2.判断是奇数还是偶数 * 2.1偶数输出红色 * 2.2奇数输出蓝色 */ var lis=document.getElementsByTagName('li'); console.log(lis);//检查是否获取到数组； for(var i=0; i<lis.length; i++){ lis[i].style.height='50px'; lis[i].style.listStyle='none'; if(i%2==0){ lis[i].style.background='blue'; }else{ lis[i].style.background='red'; } } </script></html>6.秒转换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="number" id="text"/> <input type="button" id="btn" value="转换"/> <div id="box"></div> </body> <script type="text/javascript"> //845秒变成00时00分00秒 //需求:把输入的数字转成标准时间，然后输出 //分析： /*1.获取到按钮，输入框，文本框 * 2.给按钮加点击事件 * 2.1.获得输入数字； * 2.2.数字进行转换； * 2.3输出在文本框 */ var box=document.getElementById('box'); box.style.width='173px'; box.style.height='200px'; box.style.background="pink"; box.style.overflow='auto'; window.onload=function(){ var btn=document.getElementById('btn'); var text=document.getElementById('text'); var box=document.getElementById('box'); btn.onclick=function(){ var num=text.value; if(num>=0){ var h=parseInt(num/3600); var m=parseInt((num-h*3600)/60); var s=(num-h*3600)%60; var time=h+'小时'+m+'分钟'+s+'秒'; console.log(time); var news='<p style="margin:0;">'+time+'</p>'; box.innerHTML=news+box.innerHTML; }else{ time='不能输入负数' news='<p style="margin:0;">'+time+'</p>'; box.innerHTML=news+box.innerHTML; } } } </script></html>7.全选/全不选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="checkbox" id="onc"/>全选/全不选 </div> <ul> <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li> <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li> <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li> <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li> <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li> </ul> </body> <script type="text/javascript"> //依据标签的名称获得对象，全都选到 /*var inputs=document.getElementsByTagName('input');*/ //依据标签的class属性来获取，精确定位 var inputs2=document.getElementsByClassName('cb'); /*console.log(inputs2.length);*/ document.getElementById('onc').onclick=function(){ for(var i=0; i<inputs2.length; i++){ inputs2[i].checked=this.checked; } } </script></html> 0 0
- js小案类
- js
- js
- JS
- JS
- JS
- js
- js
- js
- js
- js
- JS
- js
- JS
- js
- js
- js
- js
- 欢迎使用CSDN-markdown编辑器
- POJ 1228 （稳定凸包问题)
- 动态规划之最长公共子序列（LCS）
- STM32外部中断
- 实验吧——WriteUp&&涨姿势（1）
- js小案类
- 随机数
- Dubbo学习(一)入门
- springMVC利用WebArgumentResolver为controller注入当前用户对象参数
- JSP脚本标识
- 七大顶级桌面比较！Linux平台
- 多线程中线程同步问题
- 【2017/4/15】centos7下zabbix的安装
- Ubuntu 14.04 为root帐号开启SSH登录
