4 Array 对象方法 在右边官网上copy的 JavaScript Array 对象 | 菜鸟教程
案例二:数组常用到的重点方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ARRAY数组方法应用</title> <style type="text/css"> *{ font-size: 40px; background-color: #CCFFFF; } hr{ border: 2px solid; } </style> </head> <body> <p class="we">Array数组方法应用</p> <script type="text/javascript"> var a1=new Array("1a","2b","3c","4d","5e","6ff"); var a2=new Array("a1","b1","c1","d1"); var s=a1.toString(); document.write(s+"<br/>"); var s1=a1.join("+","<br/>"); document.write(s+"<br/>"); var s2 =a1.shift() document.write(s2+"<br/>"); var s3=a1.unshift("m","n"); document.write(s3+"<br/>"); var s4=a1.pop(); document.write(s4+"<br/>"); var s5=a1.push("m","n"); document.write(s5+"<br/>"); var s6 =a1.concat(a2) document.write(s6+"<br/>"); var s7=a1.slice(2,3); document.write(s7+"<br/>"); var s8=a1.splice(2,4); document.write(s8+"<br/>"); var s9=a1.sort( ); document.write(s9+"<br/>"); var s10=a1.reverse("m","n"); document.write(s10+"<br/>"); var s11=a2.reverse("m","n"); document.write(s11+"<br />"); </script> <script type="text/javascript"> var a3=new Array("11a","22b","33c","44d","55e","66ff","77gg"); var s12=a3.splice(2,3,'gooleg','fasebooks'); document.write(a122+"<br />"); </script> </body> </html>
案例三:数组取除重复
var arr = ["1", "2", "3", "4", "4", "6", "5"] function remove(arr) { return arr.filter(function (item, index, self) { return self.indexOf(item) == index; }); } remove(arr) console.log(arr)
案例四:数组中的排序
// 冒泡排序 // 拿函数对方法的封装 function maopao() { var n = [1, 2, 3, 4, 9, 6, 7, 8, 9]; // 定义一个空的值 var temp; for (var i = 0; i < n.length - 1; i++) { for (var j = 0; j < n.length - 1; j++) { if (n[j] > n[j + 1]) { temp = n[j]; n[j] = n[j + 1]; n[j + 1] = temp; } } } console.log(n) } maopao()
案例五:求出五个人成绩的最大值 最小值 排序 平均值
function sum(a, b, c, d, e) { // 请用户将成绩转入进去 var sum = a + b + c + d + e console.log("求和" + sum) console.log("平均值" + sum / 5) } sum(123, 456, 678, 89, 33)
案例六:日期格式化
// 日期格式化 function date(){ var date = new Date(); var year = date.getFullYear(); // 返回的是年份 var month = date.getMonth() + 1; // 返回的月份上个月的月份,记得+1才是当月 var dates = date.getDate(); if(month<10)month="0"+month; if(date<10)date="0"+date; var time=year + "-" + month + "-" + dates console.log(time) } date()
案例七:随机选取10~100之间的10个数字,存入一个数组,并排序
// 随机生成10到100的数字 function maopao1() { var a=(Math.floor(Math.random()*10)+90) var b=(Math.floor(Math.random()*10)+90) var c=(Math.floor(Math.random()*10)+90) var d=(Math.floor(Math.random()*10)+90) var e=(Math.floor(Math.random()*10)+90) var f=(Math.floor(Math.random()*10)+90) var h=(Math.floor(Math.random()*10)+90) var i=(Math.floor(Math.random()*10)+90) var j=(Math.floor(Math.random()*10)+90) var k=(Math.floor(Math.random()*10)+90) var n = [a, b, c, d, e, f, h, i, j,k]; // 定义一个空的值 var temp; for (var i = 0; i < n.length - 1; i++) { for (var j = 0; j < n.length - 1; j++) { if (n[j] > n[j + 1]) { temp = n[j]; n[j] = n[j + 1]; n[j + 1] = temp; } } } console.log(n) } maopao1()
案例八:输出密文,使用函数
某个公司采用公用电话传递数据,数据是8位的整数,在传递过程中是加密的,
加密规则如下:每位数字都加上5,然后用除以10的余数代替该数字,
反转,请编写一个函数,传入原文,输出密文,使用函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // var s = Math.floor(Math.random() * 10000); // 定义第一个变量 // 定义第二个变量 var r; var a = 123; var b = 234; r = a; a = b; b = r; console.log(a) console.log(b) var aa = 4; var bb = 5; console.log(aa / 2); //除数 console.log(bb % 2); //余数 // 案例 function RetGyuhtrDertp() { // 生成随机的一个变量 var num = Math.floor(Math.random() * 10000); // console.log("随机数为" + num); // 个 var fist = (num % 10 + 5) % 10; console.log("第一位数" + fist); var two = parseInt(num % 10 % 10 + 5) % 10; console.log("第二位数" + two); var three = parseInt((num / 100) % 10 + 5 + 5) % 10; console.log("第三位数" + three); var four = parseInt((num + 5) / 1000) % 1000; console.log("第四位数" + four); var arr = [fist, two, three, four]; console.log("原数组1" + arr) console.log((arr.reverse())) } // 函数的调用 RetGyuhtrDertp() </script> </body> </html>
案例九 输入五个数字,取出最大值,最小值,随机一个生成最小值~最大值范围的值
var a = prompt("请输入第1个数"); var a1 = prompt("请输入第2个数"); var a2 = prompt("请输入第3个数"); var a3 = prompt("请输入第4个数"); var a4 = prompt("请输入第5个数"); console.log("最大值" + Math.max(a, a1, a2, a3, a4)) console.log("最小值" + Math.min(a, a1, a2, a3, a4)) // 随生成最的值和最小值的范围 var max = (Math.random() * 1000).toFixed(0) var min = (Math.random() * 1000).toFixed(0) console.log("最大的范围" + max) console.log("最小的范围" + min)
案例十:输入一串字符串(字母),并替换所有的a为-,替换之后转换为大写
var str1 = prompt("请用户输入字符串的信息") var str2 = str1; console.log(str2) // console.log(str2.replace(/a/gi, "_").toUpperCase()); //bs bn angle
案例十一:输入一串字符串,截取2~8位,判断是否以say开头是转为大写否则不变,
end结尾是转为小写,否则不变
var str3 = prompt("请用户输入字符串的内容信息"); var str4 = str3; console.log(str4.split(1, 7)) if (str4.startsWith('say')) { console.log(str4.toUpperCase) } if (str4.endsWith('end')) { console.log(str4.toLocaleUpperCase) } else { console.log(str4) }
案例十二:输入一串字符串,计算每个字符出现的次数.
function getMost(str) { // 步骤1 var result = {}; for (let i in str) { if (str[i] in result) { // 步骤2 result[str[i]]++; } else { // 步骤3 var object = {}; object[str[i]] = 1; result = Object.assign(result, object); } } return result; } var str1=prompt("请输入你的字符串的信息") var result = getMost(str1); console.log(result);
案例十三:以元旦为例,获取了所有农历节日
var date1=new Date() var three=date1.getFullYear()+1; date1.setFullYear(three); date1.setMonth(0); date1.setDate(1); var date2=new Date(); var date3=date1.getTime()-date2.getTime(); var days=Math.ceil(date3/(24*60*60*10000)); console.log(days)
案例十四:倒计时
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2021年倒计时</title> <style type="text/css"> .rty{ color: rgb(0, 0, 0); } .tyu{ color: #ffd5ef; } </style> </head> <body> <h1 id="res"></h1> <script type="text/javascript" class="rty"> function test(year,month,day){ var end =new Date(year,month-1,day); var leftTime=end.getTime()-Date.now(); var day =Math.floor(leftTime/1000/60/60/24); var h =Math.floor(leftTime/1000/60/60%24); var m =Math.floor(leftTime/1000/60%60); var s =Math.floor(leftTime/1000/60); var str="距2022年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒"; res.innerHTML=str } setInterval("test(2022,12,31)",1000); </script> </body> </html>
案例十五:格式化字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 格式化字符串 var str="人最坏的习惯之一就是抱住已经拥有的东西不放,其实一个人只要舍得放下自己的那点小天地,就很容易走进宇宙的大世界。这个世界为你准备的精彩很多。" document.write("<h2>"+str.anchor()+"</h2><br>") document.write("<h2>"+str.big()+"</h2><br>") document.write("<h2>"+str.small()+"</h2><br>") document.write("<h2>"+str.fontsize()+"</h2><br>") document.write("<h2>"+str.bold()+"</h2><br>") document.write("<h2>"+str.italics()+"</h2><br>") document.write("<h2>"+str.link()+"</h2><br>") document.write("<h2>"+str.strike()+"</h2><br>") document.write("<h2>"+str.blink()+"</h2><br>") document.write("<h2>"+str.fixed()+"</h2><br>") document.write("<h2>"+str.fontcolor("red")+"</h2><br>") document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sub()+"</h2><br>") document.write("<h2>`其实一个人只要舍得放下自己的那点小天地'"+str.sup()+"</h2><br>") </script> </body> </html>
案例十六:简单的选择卡
<!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; charset=utf-8" /> <title>简易选项卡</title> <style> body, ul, li { margin: 0; padding: 0; } body { font: 12px/1.5 Tahoma; } #outer { width: 450px; margin: 10px auto; } #tab { overflow: hidden; zoom: 1; background: #000; border: 1px solid #000; } #tab li { float: left; color: #fff; height: 30px; cursor: pointer; line-height: 30px; list-style-type: none; padding: 0 20px; } #tab li.current { color: #000; background: #ccc; } #content { border: 1px solid #000; border-top-width: 0; } #content ul { line-height: 25px; display: none; margin: 0 30px; padding: 10px 0; } </style> <script> window.onload = function() { var oLi = document.getElementById("tab").getElementsByTagName("li"); var oUl = document.getElementById("content").getElementsByTagName("ul"); for (var i = 0; i < oLi.length; i++) { oLi[i].index = i; oLi[i].onmouseover = function() { for (var n = 0; n < oLi.length; n++) oLi[n].className = ""; this.className = "current"; for (var n = 0; n < oUl.length; n++) oUl[n].style.display = "none"; oUl[this.index].style.display = "block" } } } </script> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">第一课</li> <li>第二课</li> <li>第三课</li> </ul> <div id="content"> <ul style="display:block;"> <li><a href="A-1.html">网页特效原理分析</a></li> <li>响应用户操作</li> <li>提示框效果</li> <li>事件驱动</li> <li>元素属性操作</li> <li>动手编写第一个JS特效</li> <li>引入函数</li> <li>网页换肤效果</li> <li>展开/收缩播放列表效果</li> </ul> <ul> <li>改变网页背景颜色</li> <li>函数传参</li> <li>高重用性函数的编写</li> <li>126邮箱全选效果</li> <li>循环及遍历操作</li> <li>调试器的简单使用</li> <li>典型循环的构成</li> <li>for循环配合if判断</li> <li>className的使用</li> <li>innerHTML的使用</li> <li>戛纳印象效果</li> <li>数组</li> <li>字符串连接</li> </ul> <ul> <li>JavaScript组成:ECMAScript、DOM、BOM,JavaScript兼容性来源</li> <li>JavaScript出现的位置、优缺点</li> <li>变量、类型、typeof、数据类型转换、变量作用域</li> <li>闭包:什么是闭包、简单应用、闭包缺点</li> <li>运算符:算术、赋值、关系、逻辑、其他运算符</li> <li>程序流程控制:判断、循环、跳出</li> <li>命名规范:命名规范及必要性、匈牙利命名法</li> <li>函数详解:函数构成、调用、事件、传参数、可变参、返回值</li> <li>定时器的使用:setInterval、setTimeout</li> <li>定时器应用:站长站导航效果</li> <li>定时器应用:自动播放的选项卡</li> <li>定时器应用:数码时钟</li> <li>程序调试方法</li> </ul> </div> </div> </body> </html>