2020-11-27案例-前端初学可作为练习

数据的应用：

var fruit = "apple, orange, peach,banana";
var arrList = fruit.split(",");
var str = arrList.join("-");
document.write("分割前：" + fruit + "<br/>");
// 分割前：apple, orange, peach,banana
document.write('使用"-"重新连接后：' + str);
// 使用"-"重新连接后：apple- orange-peach-banana

自定义输出一个等腰三角形

var t = prompt("请输入一个整数", "");
if (t > 5) {
	// 大于5时输出一个倒等腰三角形
     for (var i = t; i > 0; i--) {
         for (var j = 0; j < i; j++) {
             document.write("*&nbsp;&nbsp;");
         }
         document.write("<br />");
     }
 } else {
	// 不大于5输出一个对等等腰三角形
     for (var k = t; k > 0; k--) {
         for (var m = 0; m < k; m++) {
             document.write("*&nbsp;&nbsp;");
         }
         document.write("<br />");
     }
     for (var n = 1; n <= t; n++) {
         for (var h = 0; h < n; h++) {
             document.write("*&nbsp;&nbsp;");
         }
         document.write("<br />");
     }
 }

获取0-99随机数

// 随机数：Math.random()*(最大数-最小数+1)+最小数
function getnum() {
	var n = Math.floor(Math.random() * (99 - 2 + 1) + 2);
	// 给id为math的 内容 为随机数n
	document.getElementById("math").innerHTML = n;
}

//上面为js部分，下面为html部分（<div id="math"></div>一定需要这个，不然你看不到你显示的随机数）
<input type="button" value="点击随机数2-99" onclick="getnum();" />
<div id="math"></div>

当前时间，会实时更新的

function year() {
	var date = new Date();
	var st = date.getDate();
	var hour = date.getHours();
	var minutes = date.getMinutes();
	var ss = date.getSeconds();
	document.getElementById("time").innerHTML = hour + ":" + minutes + ":" + ss;
}
//js定时函数，每隔一秒调用一次，所以我们会认为是实时更新。
setInterval("year()", 1000);

//下面为html部分，<input type="button" value="点击显示时间" onclick="year()"/>可手动调用当前时间
<!--<input type="button" value="点击显示时间" onclick="year()"/>-->
<div id="time"></div>

随机获取自定义颜色

function getColor() {
	var colors = ["红色", "橙色", "黄色", "绿色", "青色", "蓝色", "紫色"]
	//0-6
	var num = Math.floor(Math.random() * 7);
	document.getElementById("color").innerHTML = colors[num];
}

//下面为html部分
<input type="button" value="获取随机颜色" onclick="getColor();" />
<div id="color"></div>

转换大小写toUpperCase和toLowerCase，
截取字符串substring，
返回下标所在位置indexOf

var str = "ABCDEF";
var st = "1970148775@qq.com";
var d = st.split("@"); //根据所填的进行分割
for (var i = 0; i < d.length; i++) {
	alert(d[i]);
}
alert("长度" + str.length);
alert("转换全部小写" + str.toLowerCase()); //找到返回对应下标，没找到返回-1
alert("转换全部大写" + st.toUpperCase());
alert(st.substring(1, 5)); //9701，截取到下标5但不包括5
alert(st.indexOf("q")); //返回下标第一次出现的位置,没有则返回-1

获取类型typeof

var str = "ABCDEF";
var num1 = 10.6;
var flag = true;
var st;
var ss = new Array();
alert(typeof (str)); // string
alert(typeof (num1)); // number
alert(typeof (flag)); // boolean
alert(typeof (st)); // unidefind
alert(typeof (ss));// object

下面这样赋值，并不是会两个都赋到，只会赋值给第二个

var num1, num2 = 10;
//只是赋值了第二个数字，离他最近的
alert(num2);

var a = new Array(3);
a[0] = 1;
a[1] = 6;
a[2] = 3;
alert(a.push(4)); //添加了一个元素4
alert(a.sort()); //按照从小到大顺序输出

parseInt转换整型和parseFloat浮点型，
判断是否数字和是否英文，
弹窗默认输入prompt内容
注意：NaN 代表 not a num

var pa = "36s25.8id";
var nu = parseInt(pa);
alert(nu);//36
var fl = "123.89gb";
alert(parseFloat(fl))//123.89
// 可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。
// 如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
// isNaN判断是不是一个数字
alert(isNaN("123"));//false
// isFinite判断是不是英文
alert(isFinite("abc"));//false
// false代表满足条件, true代表特殊的非数字值 NaN
prompt("请输入文字", "red"); //后面一个值是默认值,代表方框里面有默认的

转译单引号

alert("hello\'sdsd\'456");// hello'sdsd'456
alert('hello"sd\'s\'d"456');// hello"sd's'd"456

typeof 获取类型

document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,
    height = 10,
    name = "rose";
var date = new Date(); //获取时间日期对象
var arr = new Array(); //定义数组
document.write("width: " + typeof width + "<br/>");
document.write("height: " + typeof height + "<br/>");
document.write("name: " + typeof name + "<br/>");
document.write("date: " + typeof date + "<br/>");
document.write("arr: " + typeof arr + "<br/>");
document.write("true: " + typeof true + "<br/>");
document.write("null: " + typeof null);
// 打印在下面
// width: undefined
// height: number
// name: string
// date: object
// arr: object
// true: boolean
// null: object