javaScript学习笔记（代码实例）
1、使用prompt输入一个整数x
var x = prompt("输入一个整数","0");
2、输出所有的水仙花数
//水仙花 document.write("水仙花数有：") var a,b,c,n; for (var i=100; i<1000;i++) { n=i.toString(); a=parseInt(n[0]); b=parseInt(n[1]); c=parseInt(n[2]); if(i==a*a*a+b*b*b+c*c*c){ document.write(i+"、"); } }
3、输入三个正整数，判断这三个数能够作为一个三角形的三条边。
var a = prompt("请输入第一条边"); var b = prompt("请输入第二条边"); var c = prompt("请输入第三条边"); if(a+b>c&&a+c>b&&b+c>a){ alert("三角形成立"); }else{ alert("不能构成一个三角形"); }
4、输出100以内的所有质数
document.write("100以内的质数有：")
for (var i=2;i<=100;i++) {
var num = true;//创建一个布尔值，用来保存结果，默认i是质数
for(var j=2;j<i;j++){
if(i%j==0){
num = false;
}
}
//如果是质数，打印i的值
if(num){
document.write(i+",");
}
}
5、九九乘法表
for(var a=1;a<=9;a++){ for(var b=1;b<=a;b++){ var i = 0; i = a*b; document.write(b+"*"+a+"="+i+"   ") } document.write("<br />")//每一行循环结束就换行 }
6、在页面上使用水平线画出一个三角形
（思路：用hr画横线，然后从短线加到长线，这里暂且就加5条吧）
for(var row = 1;row <= 5;row++){ var html = "<hr width = '"+row*10+"px'>"; document.write(html+"<br />"); }
7、数组排序（数组sort排序）
//比较大小的话可以用两个数相减，根据其结果是否小于0或大于0判断大小
//从小到大排序： //1、先定义一个数组 var arr=[123,5,89,0,13]; // arr.sort(); //document.write(arr);//这里会按照字符串排序,也就是排序的时候只看第一个数字，所以输出的排序是：0，123，13，5，89 arr.sort(function(m,n){ if(m-n>0){ return 1;//表示把数字大的放在后面一位 }else{ return -1;//表示把数字小的放在前面一位 } }) document.write(arr);
8、push添加元素
var arr=[1,2,3,4,5];
document.write(arr.push("6","7")+"<br />");//6是指将这个数列变成6个数，7是指添加的数
document.write(arr+"<br />");
//pop用来删除数组的最后一个元素
document.write(arr.pop());
document.write("<br />");
document.write(arr);
document.write("<br />")
//splice比较复杂，前面的两位数字的含义分别是：
//第一位数字表示的是插入或替换的数，后面的数字代表的是要删除还是插入还是替换
//示例1：4表示在第五位数插入，0表示原来的数不变，也就是插入一个数，这一个数组会多出一个数
arr.splice(4,0,"13");
document.write(arr);
document.write("<br />");
//示例2：这里的3表示第4位数，1表示删除第4位数，8表示用来替换被删除的第4位数。
arr.splice(3,1,"8");
document.write(arr);
9、向空数组中加入10个随机的整数，随机的整数在1~100之间。
var arr = []; for(var i=1;i<=10;i++){ arr.push(parseInt(Math.random()*100)); } document.write(arr); document.write("<br />"); //查询数组里最大数和最小数(1、可排序，则第一个数中min，最后一个数是max2、逐一比较其大小) //4、对上述数组进行降序排序 arr.sort(function(m,n){ if(m-n>0){ return -1;//表示把数字大的放在前面一位 }else{ return 1;//表示把数字小的放在后面一位 } }) document.write("max:"+arr[0]+"<br />"); document.write("min:"+arr[arr.length-1]+"<br />"); document.write(arr+"<br />"); var sum = 0; for(var j=0;j<10;j++){ sum += arr[j]; } document.write(sum+"<br />"); var avg = sum/arr.length; document.write(avg+"<br />");
10、用二分查找方式查找数组中是否有10这个数
/* * [binarySearch 二分查找] * @param {[type]} value [查找元素] * @param {[type]} arr [数组] * @param {[type]} startIndex [开始索引] * @param {[type]} endIndex [结束索引] * @return {[type]} [返回查找元素的索引] */ var arr = []; for(var i=1;i<=10;i++){ arr.push(parseInt(Math.random()*100)); } document.write(arr); document.write("<br />"); function binarySearch(value,arr,startIndex,endIndex) { //instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置 if(!value|| !(arr instanceof Array)) return; var len = arr.length, startIndex = typeof startIndex === "number" ? startIndex : 0, endIndex = typeof endIndex === "number" ? endIndex : len-1, midIndex = Math.floor((startIndex + endIndex) / 2), midval = arr[midIndex]; if(startIndex > endIndex) return ; if(midval === value){ return midIndex; }else if (midval > value) { return binarySearch(value, arr, startIndex, midIndex - 1); }else { return binarySearch(value, arr, midIndex + 1, endIndex); } } document.write(binarySearch(10,arr));
var arr = [1,2,3,45,10,8]; function binarySearch(value,arr,startIndex,endIndex) { if(!value|| !(arr instanceof Array)) return; var len = arr.length, startIndex = typeof startIndex === "number" ? startIndex : 0, endIndex = typeof endIndex === "number" ? endIndex : len-1, midIndex = Math.floor((startIndex + endIndex) / 2), midval = arr[midIndex]; if(startIndex > endIndex) return ; if(midval === value){ return midIndex; }else if (midval > value) { return binarySearch(value, arr, startIndex, midIndex - 1); }else { return binarySearch(value, arr, midIndex + 1, endIndex); } } document.write(binarySearch(10,arr));
11、
//计算数列1 1 2 3 5 8 11的第20项
/*斐波那契数列：1、1、2、3、5、8、13、21、34、……
函数：
使用公式f[n]=f[n-1]+f[n-2]，依次递归计算，递归结束条件是f[1]=1，f[2]=1。
for循环：
从底层向上运算，
a(0)+a(1)->a(1) //第0个数字+第1个数字=第2个数字
a(1)+a(1)->a(2) //第1个数字+第2个数字=第3个数字
a(2)+a(3)->a(5) //第2个数字+第3个数字=第4个数字
······
a(n-1)+a(n-2)->a(n)
因此，在循环中只要定义三个变量，便能将最后的f(n)求出来
*/
function fn(n){ if(n==1||n==2){ return 1;} //因为斐波那契数列格式为：1、1、2、3、5、8、13、21、34、......,n=1和n=2的时候都是输出1 return fn(n-1)+fn(n-2); //不断调用自身函数，n-1是穿进去的参数的前一次，就是最后n的前一个数字。所以n-2是最后传入参数的前两个数字。 } //用函数写出斐波那契数列 var n=parseInt(prompt('请输入一个数字')); var a1=1; var a2=1; var a3=0; for(var i=2;i<=n;i++){//因为前两个数都是1，所以要从i=2开始，就是前两个数的1+1=2，i的初始值其实是第三个数 a3=a1+a2;//第三个数等于第一个数加上第二个数 a1=a2;//第一个数就变成了之前的第二个数 a2=a3;//第二个数就变成了刚刚的第三个数 } document.write(a3); //使用for循环写出斐波那契数列
12、输入一个整数，计算它的位数
var num = prompt("输入一个整数","0"); document.write("这是"+num.length+"位数");
13、使用“筛选法”打印100以内的所有质数
document.write("100以内的质数有：")
for (var i=2;i<=100;i++) {
var num = true;//创建一个布尔值，用来保存结果，默认i是质数
for(var j=2;j<i;j++){
if(i%j==0){
num = false;
}
}
//如果是质数，打印i的值
if(num){
document.write(i+",");
}
}
14、编写方法实现判断一个整数是否是质数的判断。
function zs(num){ for(i=2;i<num;i++){ var sum = true; if(num%i == 0){ return false; } }return true; } document.write(zs(8));
15、编写方法实现统计数组中的数据有几个偶数。
/* * 统计数组中的数据有几个偶数 * 已知条件：数组 * 结果：整数，偶数的个数 */ function getEvenCount(arr){ //偶数的个数初始值=0 var count=0;'’' //循环的取出每个元素 for(var i=0;i<arr.length;i++){ //判断该元素是不是偶数，是，偶数的个数+1 if(arr[i]%2===0){ count++; } } //返回偶数的个数 return count; } console.log(getEvenCount([1,2,3,5,4,8,7]));
16、一个球从高处落下，触地后会反弹，且反弹高度是落下高度的一半。编写方法计算小球需要经过几次才会静止(反弹高度<0.00001m认为静止)。
function getBoundCount(h){ var count = 0; //警告：尽量避免使用小数 while(h*100000>=1){ h /=2; count++; } return count; } document.write(getBoundCount(20));
17、编写方法实现：输入2个正整数，输出他们的最大公约数。
function getMax(a,b){ //计算两个整数的余数 var yu = a % b; //余数不等于0则循环 while(yu!=0){ //去掉第一个数，赋值为原来的第二个数 a=b; //第二个数变成余数 b =yu; //计算新的余数 yu=a%b; } return b; } document.write(getMax(4,16));
18、添加按钮（每点击一下都会新增一个命名为secret的元素）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>fruit</h3> <ul id="fruit"> <li>apple</li> <li>orange</li> <li>banana</li> </ul> <input type="button" onclick="addFruit();" value="new"/> <script> var ul=document.getElementById("fruit"); var oldCount = ul.getElementsByTagName("li").length; function addFruit(){ var newCount = ul.getElementsByTagName("li").length; if(newCount-oldCount>=2){ return; } var li = document.createElement("li"); li.innerHTML="secret"; li.style.color="cadetblue"; li.style.fontSize="20px"; fruit.appendChild(li); } </script> </body> </html>
19、隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ if(i%2==0){ aLi[i].style.backgroundColor='greenyellow'; }else{ aLi[i].style.backgroundColor='deepskyblue' } } } </script> </body> </html>
20、全选，全不选，反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="全选"/> <input id="btn2" type="button" value="不选"/> <input id="btn3" type="button" value="反选"/> <div id="div1"> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> <input type="checkbox" /></br> </div> <script> window.onload=function(){ var oBtn1=document.getElementById("btn1"); var oBtn2=document.getElementById("btn2"); var oBtn3=document.getElementById("btn3"); var oDiv=document.getElementById('div1'); var aCh=document.getElementsByTagName("input"); oBtn1.onclick=function(){ for(var i=0;i<aCh.length;i++){ aCh[i].checked=true; } } oBtn2.onclick=function(){ for(var i=0;i<aCh.length;i++){ aCh[i].checked=false; } } oBtn3.onclick=function(){ for(var i=0;i<aCh.length;i++){ if(aCh[i].checked==true){ aCh[i].checked=false; }else{ aCh[i].checked=true; } } } } </script> </body> </html>
(有空会添加新的)
