W3school学习 js-2

<html>
<body><p id = "demo1"></p><button onclick = "myfunction_1()">数组添加push方法->点击添加！</button><p id = "demo2"></p><button onclick = "myfunction_2()">数组添加length方法->点击添加！</button><p id = "demo3"></p><p id = "demo4"></p><p id = "demo5"></p><p id = "demo6"></p><p id = "demo7"></p><p id = "demo8"></p><p id = "demo9"></p><p id = "demo10"></p><p id = "demo11"></p><button onclick = "myfunction_3()">sort()排序！</button><p id = "demo12"></p><button onclick = "myfunction_4()">字母排序</button><button onclick = "myfunction_5()">数字排序</button><p id = "demo13"></p><button onclick = "myfunction_6()">随机数排列</button><p id = "demo14"></p><p id = "demo15"></p><p id = "demo16"></p><p id = "demo17"></p><p id = "demo18"></p><button onclick = "document.getElementById('demo18').innerHTML = getRndInteger(1,10)">点击生成随机数</button><p id = "demo19"></p><input id = "age" value = "18" /><button onclick = "myfunction_9()">试一试</button><p id = "demo20"></p><input id = "age" value = "18" /><button onclick = "myfunction_10()">试一试</button><script>//有2种给数组添加新元素的方法var fruits = [ "Banana", "Apple", "Orange", "Mango", "66"];document.getElementById("demo1").innerHTML = fruits;function myfunction_1(){fruits.push("Lemon");  //1：push 方法向数组追加新元素。document.getElementById("demo1").innerHTML = fruits;}document.getElementById("demo2").innerHTML = fruits;function myfunction_2(){fruits[fruits.length] = "Apple";  //2：length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便方法。document.getElementById("demo2").innerHTML = fruits;}//pop() 方法从数组中删除最后一个元素fruits.pop();document.getElementById("demo5").innerHTML = "使用pop()删除最后一个数据：" + fruits;document.getElementById("demo6").innerHTML = "删除之前的数据：" + fruits;document.getElementById("demo7").innerHTML = "删除的数据：" + fruits.pop();document.getElementById("demo8").innerHTML = "删除之后的数据：" + fruits;//push()显示数组数据长度document.getElementById("demo9").innerHTML = "push()显示增加88后的数组长度：" + fruits.push("88");document.getElementById("demo10").innerHTML = "增加 88 之后的数组数据显示：" + fruits;/*案例网址：https://www.w3school.com.cn/js/js_array_methods.aspshift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。splice() 方法可用于向数组添加新项splice() 方法返回一个包含已删除项的数组concat() 方法通过合并（连接）现有数组来创建一个新数组slice() 方法用数组的某个片段切出新数组*///toString() 方法以逗号分隔的字符串返回数组var num = ["11", "22", "33"];document.getElementById("demo3").innerHTML = "toString()用法：" + num.toString();//join() 方法将数组元素连接成一个字符串，在这个例子中我们使用“*”作为元素之间的分隔符document.getElementById("demo4").innerHTML = "join(*)用法：" + num.join("*");//通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。function myfunction_3(){fruits.sort();  //单独使用sort()是按照字母进行升序//fruits.reverse();document.getElementById("demo11").innerHTML = fruits;}//单击按钮可按字母顺序或数字顺序对数组进行排序var points = [20,18,47,23,12,100,10];document.getElementById("demo12").innerHTML = points;function myfunction_4(){points.sort();document.getElementById("demo12").innerHTML = points;}function myfunction_5(){points.sort(function(a,b){return a - b} );document.getElementById("demo12").innerHTML = points;}//反复点击按钮，对数组进行随机排序。document.getElementById("demo13").innerHTML = points;function myfunction_6(){points.sort(function(a,b){return 0.5 - Math.random()});document.getElementById("demo13").innerHTML = points;}//数组迭代var txt = " ";var numbers = [1,3,5,7,9];numbers.forEach(myfunction_7);  document.getElementById("demo14").innerHTML = txt;/*forEach() 方法为每个数组元素调用一次函数（回调函数）注释：该函数接受 3 个参数：项目值项目索引数组本身*/<!-- function myfunction_7(value, index, array){ --><!-- txt = txt + value + "<br>"; --><!-- } -->function myfunction_7(value){txt = txt + value + "<br>";}  //因为目前只用到了value参数，其他可忽略//通过对每个数组元素执行函数来创建新数组var numbers_1 = [23, 34, 44, 22, 2];var numbers_2 = numbers_1.map(myfunction_8);document.getElementById("demo15").innerHTML = numbers_2;function myfunction_8(value, index, array){return value*2; }//Math.floor(Math.random() * 10) 返回 0 与 9 之间的随机整数（均包含）document.getElementById("demo16").innerHTML = "0-9的随机整数是：" + Math.floor(Math.random() * 10);//Math.floor(Math.random() * 10) + 1) 返回 1 与 10 之间的随机整数（均包含）document.getElementById("demo17").innerHTML = "1-10之间的随机整数是：" + Math.floor(Math.random() * 10 + 1 );//每当您点击按钮，getRndInteger(min, max) 就会返回 1 与 10（均包含）之间的随机数function getRndInteger(max, min){return Math.floor(Math.random() * (max - min + 1)) + min;}//输入您的年龄然后点击这个按钮function myfunction_9(){var age, voteable;age = document.getElementById("age").value;voteable = (age < 18) ? "好年轻" : "好成熟";document.getElementById("demo19").innerHTML = voteable;}function myfunction_10(){var age, voteable;age = Number(document.getElementById("age").value);if (isNaN(age)) {voteable = "输入值不是数字";} else {voteable = (age < 18) ? "好年轻" : "够成熟";}document.getElementById("demo20").innerHTML = voteable;}
</script></body>
</html>

W3school学习 js-2相关推荐

w3school学习 - javascript入门
在浏览一下客户端代码时,经常会遇到javascript脚本,系统的学习一下对以后更深入了解客户端很有好处. 1. 应用场景改进设计验证表单检测浏览器创建cookies等 2. 入门实例这里的 ...
自己关于学习js的一些经历
做为一名前端,相信许多初学者都会遇到这个问题:js学不会,不知道该怎么学习,不知道如何提高.在这里和大家分享一下自己的学习过程吧. 现在前端这门职业已经日趋成熟,自学出身加上培训机构的批量生产,市场上 ...
javascript实战pdf_javascript该怎么学呢？学习Js之路
javascript该怎么学呢?Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条& ...
学习js,尝试写一个表单验证框架(1)－规划
斗胆放到首页来,如果不合适的话就删了吧,谢谢其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请 ...
在学习js的然后写代码的过程中我老是找不到思路怎么办？
在学习js的然后写代码的过程中我老是找不到思路怎么办? 写的少了,边写边思考: 刚刚学习的阶段,还是要多写,多借鉴别人的代码. 转载于:https://www.cnblogs.com/helloy/p ...
我来重新学习js的面向对象（part 4）
我来重新学习js 的面向对象(part 4) 续上一篇,随着业务越来越大,要考虑一些继承的玩意了,大千世界,各种东西我们要认识和甄别是需要靠大智慧去分门别类,生物学中把动植物按界.门.纲.目.科.属. ...
javascript该怎么学呢？值得收藏的学习Js之路
javascript该怎么学呢?Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条& ...
初学者学习JAVASCRIPT很吃力怎么办？到底该如何学习JS？
Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条"轻松学习Js之路&qu ...
学习js的第五天【作用域，递归，对象，数组】
学习js的第五天[作用域,递归,对象,数组] 一.作用域 ===>变量起作用的范围 1.局部作用域:在函数体中作用范围 2.全局作用域:在整个js全局起作用 var num=100 -----& ...
学习JS的第六天之字符串
学习JS的第六天之字符串其他学习笔记:点击前往文章目录学习JS的第六天之字符串前言一.字符串(String) 1.创建一个字符串 2.字符串(String)的方法 3.字符串的length属 ...

W3school学习 js-2

W3school学习 js-2相关推荐

最新文章

热门文章