js简介(开发基础应用)

发表于 | 分类于

随机数

1
var randomNum = parseInt(Math.random()*100+1);  //[1,101)随机数  Math.random()*几  就是0到几的随机数

验证码

1
2
var randomNum = ""+parseInt(Math.random()*10) + parseInt(Math.random()*10) + parseInt(Math.random()*10) + parseInt(Math.random()*10);
//四位验证码：创建四位随机数前面加个空字符串变成字符串凭借

字符串转数组

1
2
3
var str = "good good study";
      var arr = str.split(" ");//字符串截取
      console.log(arr);

数组转字符串

1
2
3
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");      //"0-1-2-3-4"

对象转数组

1
2
3
4
5
6
var obj = {name:'laoxie',age:18,gender:'男'};
var all = [];
   for(var key in obj){
       	all.push(obj[key]);
       	console.log(all);
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function  fun5() {
        var scoreObject = {
            "Tony": {
                "Math": 95,
                "English": 79,
                "Music": 68
            },
            "Simon": {
                "Math": 100,
                "English": 95,
                "Music": 98
            },
            "Annie": {
                "Math": 54,
                "English": 65,
                "Music": 88
            }
        }
        var arr= [];
        for (var i in scoreObject){
          arr.push(i,scoreObject[i].Math,scoreObject[i].English,scoreObject[i].Music);
        }
        console.log(arr);
    }
    fun5();//对象内多个属性

页面数据传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var goods = {
				name:'阿联酋美女',
				age:18,
				price:'20W',
				imgurl:'../images/x.jpg'
			}
			var params = "";
			// 对象转成字符串
			// 传递数据时，不能直接传递对象。需要将对象转成name=阿联酋美女&age=18&price=20W这种格式
			for(var key in goods){
				params += key + "=" + goods[key] + "&";
			}
			params = params.slice(0,-1);			
			console.log(params);
			var meinv= document.getElementsByClassName('meinv');
			//for循环
			meinv[0].onclick = function(){
				location.href = "04details.html?" + encodeURI(params);
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	var tupian  = document.getElementById("tupian");
			var meinvName  = document.getElementById("meinvName");
			// 1.
			var params = decodeURI(location.search).slice(1);
			// ===========================2.将字符串转成对象===========
			// 字符串=split("&")=>数组["name=美女","age=18",]
			var paramsArr = params.split("&");
			var paramsObj = {};
			paramsArr.forEach(function(item){
				var arr = item.split("=");
				paramsObj[arr[0]] = arr[1];
			});
//{name: "%E9%98%BF%E8%81%94%E9%85%8B%E7%BE%8E%E5%A5%B3", age: "18", price: "20W",imgurl: "../images/x.jpg"}
			// ===========================
			// 3.给元素赋值
			tupian.src = paramsObj.imgurl;
			meinvName.innerHTML = paramsObj.name;

生成表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function setTable(r,c){
            var table = document.createElement("table");
            var tbody = document.createElement("tbody");
            for(var i=0;i<r;i++){
                var tr = document.createElement("tr");
                for(var j=0;j<c;j++){
                    var td = document.createElement("td");
                    td.innerHTML = "单元格"+i+j;
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }
            table.appendChild(tbody);
            return table;
        }

tab标签切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
                tab标签切换
                    思路：
                        1）初始化
                            * 高亮第一个tab
                            * 隐藏除第一张以外的图片
                        2）切换：鼠标点击tab（关键：获取点击的index值）
                            * 高亮显示当前tab,去除其他所有高亮（遍历）
                            * 切换相应的图片，隐藏其他所有图片（遍历）
             */
             var tab = document.getElementsByClassName('tab')[0];
             var tabItem = tab.children[0].children;
             var tabContent = tab.children[1].children;
             tabItem[0].className = "active";
             tabContent[0].style.display = "block";

             for(var i=0;i<tabItem.length;i++){
                tabItem[i].idx = i;
                tabItem[i].onmouseover= function(){
                    for(var i=0;i<tabItem.length;i++){//先遍历一遍让所有的项都为下面的样式
                        tabItem[i].className = "";
                        tabContent[i].style.display = "none";
                    }
                    this.className = "active";//for循环结束后添加类名样式  实现单一内容显示
                    // var idx = this.getAttribute("idx");  getAttribute() 方法返回指定属性名的属性值
                    // tabContent[idx].style.display = "block";
                    // 当前tab对应的content出现.通过索引
                    tabContent[this.idx].style.display = "block";
                }
             }