JaveScript 案例
输入三个值比大小
var a=prompt('请输入数值:') var b=prompt("请输入数值:") var c=prompt('请输入数值:') function maxMin(max,min,mid){ if(max>min&&max>mid){ alert(max+'大') } else if(min>max&&min>mid){ alert(min+"大") } else if(mid>max&&mid>min){ alert(mid+'大') } else{ alert("相等") } } maxMin(a,b,c)
数组内相加
var arr1=[23,213,43,5,34,3] function getSum(arr){ var sum=0; for(var i=0;i<arr.length;i++){ sum+=arr[i]; } console.log(sum); } getSum([10,20,30,40]); getSum(arr1);
输入几行几列星星
var a = prompt('输入行:') var b = prompt('输入列:') function xx(hang, lie) { for (var i = 1; i <= hang; i++) { for (var j = 1; j <= lie; j++) { document.write('*'); } document.write('<br/>'); } } xx(a, b)
计算器
var a = Number(prompt('输入第一个数:')) var b = prompt('输入符号:') var c = Number(prompt('输入第二个数:')) function jsq(one,fu,two){ switch (fu) { case "+": alert(one + two ); break; case "-": alert(one - two); break; case "*": alert(one * two); break; case "/": alert(one / two); break; } } jsq(a,b,c)
打印1-100相加的数
var a=prompt('输入最大数:') function shu(max){ var num=0 for(i=1;i<=max;i++){ num=num+i } document.write(num) } shu(a)
声明式函数
预解析可以提前调用
function fn(a){ console.log(a); }
匿名表达式
不会预解析 不能提前调用
var fn2=function(a){ console.log(a); }; fn2(4)
return返回值
function fn3(a,b){ return a+b; } var res=fn3(2,3); console.log(res);
return终止代码执行
function fn4(a,b){ return false; console.log(a,b); } fn(2,3);
随机抽取姓名
方法一
var sz=['刘金龙','鎏金聋','六斤龙','溜进龙','流进龙','刘晋聋','柳金隆','瘤斤笼','⑥锦龙','硫斤聋','遛紧聋','刘津珑','李传统','李船帆','李传桨','里穿衣服的','叫孤鸿寡鹄','瑠紧聋','蓅尽陇','王坚果','王坚果Pro max','王指纹'] var index =Math.floor(Math.random()*22); console.log(sz[index]);
方法二(定时抽奖)
<style> #d1{ width: 100px; height: 50px; background-color: red; color:white; text-align: center; line-height: 50px; font-size: 20px; } #d3{ margin-left: 10px; } </style> </head> <body> <div id="d1"> </div> <button id="d2"> 抽奖 </button> <script> var arr=['鎏金聋','理串逸','亡坚果','痒总锐','假异哞','亡智闻','余总说','联名', '胡俊丽','家臣非','玛襑豫','尘世好','伤与球','阿伟']; var sun=3; var a=document.querySelector('#d2'); a.addEventListener("click",function(){ a.disabled=true; function dingshi(){ var c=document.querySelector('#d1'); sun--; if(sun==0){ var index=Math.ceil(Math.random()*13); c.innerHTML='恭喜'+arr[index]; clearInterval(timer); a.disabled=false; sun=3; } } var timer=setInterval(dingshi,1000); },false) </script>
Date对象的常用方法
var date2=new Date('2021/10/1');//获取指定某个日期的日期对象 var date=new Date();//获取的是当前的日期对象 var year=date.getFullYear();//获取的年份 var month=date.getMonth();//获取月份 var day=date.getDate();//获取几号 var week=date.getDay();//获取星期几 var hour=date.getHours();//获取小时数 var minute=date.getMinutes();//获取分钟数 var second=date.getSeconds();//获取秒数 console.log(year); console.log(month); //打印出来的月份比实际月份少1 console.log(day); console.log(week); console.log(hour); console.log(minute); console.log(second); console.log(new Date().getTime());//获取当前日期距离1970年1月1日的时间戳(毫秒数) console.log(new Date('2021/10/1').getTime());//获取10月1日距离1970年1月1日的毫秒数
数组去掉重复值
方法1
var arr=[12,12,34,34,5,6,78,876] var newArr=[];//定义一个空数组 for(var i=0;i<arr.length;i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } //思路:对原始数组进行for循环,判断新数组中是否存在原始数组中的元素,如果有, //代表室第二次出现,没有说明第一次出现,就存在新数组,最后把新数组打印出来 } console.log(newArr);
方法2
var arr=[1,2,3,44,1,44,55,66,77,8]; function unique(arr){ for(var i=0,len=arr.length;i<len;i++){ for(var j=i+1,len=arr.length;j<len;j++){ if(arr[i]===arr[j]){ arr.splice(j,1); j--;//每删除一个数j的值就减1; len--;//j值减小时len也要相应减1(减少循环次数,节省性能) } } } return arr; } document.write(unique(arr)); //1,2,3,44,55,66,77,8
数组方法
var arr1 = [1, 2, 3, 4, 5]//字面量方式 var arr2 = new Array(6);//如果传递一个参数,代表数组的长度是6 var arr3 = new Array(5, 6, 7, 8);//如果传递多个参数,代表数组中的多个元素 //判断某个变量是否为数组 var num = 10; console.log(Array.isArray(arr1));//true console.log(Array.isArray(num));//false //数组中添加和删除元素 var arr=[10,3434,5,3,55,45]; //数组中前面添加一个元素 arr.unshift(5); //数组中尾部追加一个元素 arr.push(50); //删除数据中全面第一个元素 arr.pop(); //删除数组中指定的某个元素 参数分别是:删除的索引号、删除几个、添加的元素 arr.splice(1,1,"a"); console.log(arr); //数组的倒序排列 var arr=[23,12,45,26,77] arr.reverse();//顺序翻转 arr.sort(function(a,b){ return a-b;//从小到大 升序排列 }); arr.sort(function(a,b){ return b-a;//从大到小降序排列 }) console.log(arr); //求数组中元素是否存在 如果用indexOf的返回值为-1 代表查找的元素在数组中不存在 var arr=["a","b",'c','d','e']; var index=arr.indexOf('h'); console.log(index); //数组转换成字符串 var arr=['hello','world','everyone']; var str=arr.join('');//把数组转换成字符串 document.write(str); //数组合并 var math=[66,45,67,333]; var eng=[30,20,10,60]; var bigArr=math.concat(eng); console.log(bigArr);
冒泡排序法*
var arr=[23,34,45,56,1,63,54];//从小到大排列 //外层控制的是跑几趟 内层控制的是两两互换 for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-1-i;j++){ //假设前面的数比后面的数大 ,前后换位置 if(arr[j]>arr[j+1]){ //两两交换位置 var temp=arr[j+1]; arr[j+1]=arr[j]; arr[j]=temp; } } } document.write(arr)
定义对象
var obj={ name:'荣耀', cpu:'i5-10210u', jidai:16, say:function(){ alert('版本号') } } console.log(obj.jidai); console.log(obj['name']); obj.say();
对象的循环
var obj={ name:'荣耀', cpu:'i5-10210u', jidai:16, say:function(){ alert('版本号') } } for(var k in obj){ console.log(k); console.log(obj[k]); }
统计字符串中出现次数最多的字符
var str='attfiossssfsfsjosfsfjogg'; var obj={}; for(var i=0;i<str.length;i++){ var zimu=str[i];//根据索引号获取对应单个字符 //如果原来的次数存在就累加1,否则直接赋值为1次 if(obj[zimu]){ obj[zimu]++; }else{ obj[zimu]=1; } } console.log(obj); var max=0;//假设最大次数 var maxFu='';//假设出现次数最多的字符 for(var k in obj){ if(obj[k]>max){ max=obj[k]; maxFu=k; } } console.log(maxFu+'是出现次数最多的符号'); console.log("出现的次数是"+max);
获取Dom元素的几种方式
var box1=document.getElementById('d1');//通过id名获取元素 var box2=document.getElementsByTagName('div');//通过标签名获取元素['div','div'] //h5新增的获取元素方法 var box3=document.getElementsByClassName('c1');//通过类名获取元素['div'] var box4=document.querySelector('#d1');//获取唯一的一个元素 一定要添加标识符 var box5=document.querySelectorAll('#d1');//获取的是数组
js更换背景图
方法1
<body> <button id='d1'>火烧云</button> <button id='d2'>陨石坑</button> <button id=d3>云</button> <script> var btn=document.getElementById('d1'); btn.οnclick=function(){ var box=document.body; box.style.background="url(../精选背景图/火烧云.jpg)"; } var btn=document.getElementById('d2'); btn.οnclick=function(){ var box=document.body; box.style.background="url(../精选背景图/陨石坑.jpg)"; } var btn=document.getElementById('d3'); btn.οnclick=function(){ var box=document.body; box.style.background="url(../精选背景图/云.jpg)"; } </script> </body>
方法2
<button id='d1' class="c1">火烧云</button> <button id='d2' class="c1">陨石坑</button> <button id=d3 class="c1">云</button> var btns=document.querySelectorAll('.c1'); for(var i=0;i<btns.length;i++){ btns[i].index=i; btns[i].οnclick=function(){ var index=this.index; console.log(index); document.body.style.background='url(../images/0"+(index+1)+".png)' }//图片名称改成01,02,03...的格式 }
复选框全选
全选<input type="checkbox" id='checkAll'><br/> <input type="checkbox" class='checkOne'> <input type="checkbox" class='checkOne'> <input type="checkbox" class='checkOne'> <input type="checkbox" class='checkOne'> <input type="checkbox" class='checkOne'> <script> var checkAll=document.getElementById("checkAll");//获取大复选框 var checkOnes=document.querySelectorAll('.checkOne');//获取所有的小复选框 checkAll.οnchange=function(){ var status=this.checked;//获取大复选框的选中状态 true false if(status==true){ //大的被选中了 下面的小盒子被选中 for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=true; } }else{ //大盒子取消选中 小盒子全部取消选中 for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=false; } } console.log(this.checked); }
分时问候
var hour=new Date().getHours(); if(hour>=8&&hour<12){ alert('早上好') document.body.style.background="url(../精选背景图/模糊.jpg)" }else if(hour>=12&&hour<18){ alert('中午好') document.body.style.background="url(../精选背景图/年轮.jpg)" }else if(hour>=18&&hour<=24){ alert('晚上好') document.body.style.background="url(../精选背景图/任意门.jpg)" }
点击按钮控制盒子显示
<style> #d2{ width: 300px; height: 300px; background-color: red; display:none; } </style> </head> <body> <button id="d1">显示</button> <div id='d2'></div> <script> var a=document.getElementById('d1'); var flag=0; a.οnclick=function(){ if(flag==0){ var box=document.querySelector('#d2'); box.style.display='block'; a.innerHTML='隐藏' flag=1; }else if(flag==1){ var box=document.querySelector('#d2'); box.style.display='none'; flag=0; a.innerHTML='显示' } } </script> </body>
用户发表评论
<body> <div id='box'> <!-- 让用户输入评论的内容 --> <textarea name="" id="content" cols="30" rows="10"></textarea> <button id="btn">评论</button> <ul id="list"></ul> </div> <script> var btn=document.querySelector('#btn');//获取按钮 btn.οnclick=function(){ var textArea=document.querySelector('#content');//获取文本域标签 var content=textArea.value;//获取表单标签的内容 var li=document.createElement('li')//创建li标签 li.innerHTML=content+'<a href="javascript:void(0)">删除</a>'//把用户输入的内容赋值给li标签 var ul=document.querySelector('#list'); ul.appendChild(li); textArea.value=''; var delBtns=document.querySelectorAll('#list li a');//[a,a,a] for(var i=0;i<delBtns.length;i++){ delBtns[i].οnclick=function(){ var res=confirm('你确定要删除吗'); if(res){ ul.removeChild(this.parentNode);//把当前的li标签删除 } } } console.log(delBtns); } </script> </body>
盒子跳转(tab选项卡)
<div id="box"> <button id="d1" class='red'>按钮1</button> <button id="d2">按钮2</button> <button id="d3">按钮3</button> <button id="d4">按钮4</button> <div class="box active" >我是按钮1内容</div> <div class="box">我是按钮2内容</div> <div class="box">我是按钮3内容</div> <div class="box">我是按钮4内容</div> </div> <script> var btns=document.querySelectorAll('#box>button'); var boxs=document.querySelectorAll('.box');//获取所有div for(var i=0;i<btns.length;i++){ btns[i].index=i;//把所有i保存到index属性 btns[i].οnclick=function(){ //让所有的button按钮回复初始状态 for(var j=0;j<btns.length;j++){ btns[j].className=''; } this.className='red'; //让对应的div出来 注意在这之前让所有的div先全不隐藏 for(var k=0;k<boxs.length;k++){ boxs[k].className='box'; } boxs[this.index].className='box active'; }; } </script>
鼠标跟随
方法1
<style> #d1{ width: 100px; height: 100px; position:absolute; top:100px; left:50px; } </style> <body> <img src="../精选背景图/恶魔城.jpg" alt="" id="d1"> <script> //鼠标跟随原理:用js获取鼠标的位置,然后把参数设置成图片的位置 document.addEventListener( "mousemove", function(event){ var pagex=event.pageX;//获取鼠标移动的那个点的x轴坐标 var pagey=event.pageY;//获取鼠标移动的那个点的y轴坐标 var d1=document.querySelector("#d1");//获取图片的DOm对象 d1.style.top=pagey+"px"; d1.style.left=pagex+"px"; } ) </script>
方法2(放大镜效果)
<style> #box { width: 800px; height: 800px; background-color:pink; margin: 30px auto; position: relative; } #small { width: 100px; height: 100px; background-color: rgba(250, 250, 119, 0.411); position: absolute; top: 50px; left: 60px; } </style> </head> <body> <div id="box"> <div id="small"></div> </div> <script> // 思路:遮罩移动的原理就是遮罩触发onmousemove事件时候,动态设置它的位置 var box = document.querySelector("#box"); //获取大盒子 var small = document.querySelector("#small"); //获取小盒子 遮罩 box.onmousemove = function(event) { var pageX = event.pageX; //你移动到的那个点距离页面左边的距离 var pageY = event.pageY; //你移动到的那个点距离页面顶部的距离 var boxX = box.offsetLeft; //获取大盒子在页面中左边的距离 var boxY = box.offsetTop; //获取大盒子在页面中顶部的距离 var zhongX = pageX - boxX; var zhongY = pageY - boxY; var smallX = zhongX - small.offsetWidth / 2; var smallY = zhongY - small.offsetHeight / 2; if (smallX <= 0) { smallX = 0; } if (smallY <= 0) { smallY = 0; } var leftx = box.offsetWidth - small.offsetWidth; var topY = box.offsetHeight - small.offsetHeight; if (smallX > leftx) { smallX = leftx; } if (smallY > topY) { smallY = topY; } small.style.left = smallX + "px"; small.style.top = smallY + "px"; }; </script> </body>
验证码倒计时
<body> <input type="text" id="txt"> <button id='btn'>发送</button> <div id="box"></div> <script> var num=10;//定义初始时间 var btn=document.getElementById('btn'); btn.addEventListener("click",function(){ //按钮禁用 btn.disabled=true; function countTime(){ var box=document.getElementById('box');//获取div元素 box.innerHTML=num+"秒后重新验证"; num--; if(num==0){ clearInterval(timer);//清除定时器 box.innerHTML='请重新输入验证码' //允许再次点击 btn.disabled=false; num=10; } } var timer=setInterval(countTime,1000);//开启定时器,并且保留返回值 },false) </script>
京东倒计时
<style> #bigBox { width: 190px; height: 260px; margin: 0 auto; background-image: url(../切图库2/闪电倒计时.png); } #bigBox h2 { width: 190px; text-align: center; color: white; padding-top: 40px; } .c1 div { background-color: #2f3430; width: 28px; height: 28px; display: inline-block; margin-left: 6px; margin-top: 100px; color: white; font-size: 23px; } .c1 span { color: white; font-size: 28px; height: 28px; display: inline-block; padding-top: 1px; line-height: 28px; } </style> <body> <div id="bigBox"> <h2> 距离假期结束 </h2> <div class="c1"> <div id="tian"></div> <span>:</span> <div class="shi"></div> <span>:</span> <div class="fen"></div> <span>:</span> <div class="miao"></div> </div> </div> <script> var tian = document.querySelector('#tian') var shi = document.querySelector('.shi') var fen = document.querySelector('.fen') var miao = document.querySelector('.miao') var inputtime = new Date("2021-10-07 12:00:00") mingzi() setInterval(mingzi, 1000) function mingzi() { var nowtime = new Date(); var timer = (inputtime - nowtime) / 1000; var a = parseInt(timer / 60 / 60 / 24); a = a < 10 ? "0" + a : a; tian.innerHTML = a var b = parseInt(timer / 60 / 60 % 24); b = b < 10 ? "0" + b : b; shi.innerHTML = b var c = parseInt(timer / 60 % 60); c = c < 10 ? "0" + c : c; fen.innerHTML = c var d = parseInt(timer % 60); d = d < 10 ? "0" + d : d; miao.innerHTML = d if(d==0){ clearInterval=(minzi); } } </script>
随机抽奖
<style> #d1 { width: 1880px; height: 900px; background-color: red; line-height: 900px; text-align: center; color: white; font-size: 360px; } </style> <body> <button id="d2">抽奖</button> <button id="d3">结束</button> <div id="d1"> </div> <script> var a = document.getElementById('d2'); var b = document.getElementById('d3'); var c = document.getElementById('d1'); var timer; var arr = ['鎏金聋', '理串逸', '亡坚果', '痒总锐', '假异哞', '亡智闻', '余总说', '联名', '胡俊丽', '家臣非', '玛襑豫', '尘世好', '伤与球', '阿伟']; a.addEventListener('click', function () { a.disabled = true; function fu() { var h = Math.floor(Math.random() * arr.length) c.innerHTML = "恭喜" + arr[h]; } timer = setInterval(fu, 1) }, false); b.onclick = function () { clearInterval(timer); a.disabled=false; } </script> </body>
###