js

2023-07-01

/2023

字数统计: 674 | 阅读时长≈ 3 分钟

js部分

改变 HTML 内容

1 2	x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改变内容

document.getElementById("div1").onclick=function()
        {
            this.style.backgroundColor='white';
            this.innerText="测试";
        }
		//点击变换

var a=10;//变量声明
console.log(typeof a);//控制台查看
var arr=new Array(1,2,3);//数组

var obj=new Object();
obj.phone=17633126337;
obj.name="陆文达";
for(a in obj)
{
	console.log(a);
}
function f1()//正常函数声明和调用顺序可交换
{
    console.log("123");
}
f1();
var f2=function()
{
    console.log("f2",f1);//函数也是值
}
f2();//匿名函数必须先声明，再调用
function f3()
{
console.log(arguments[0],arguments[1],arguments[2]);
}
f3('asd','asd','qwe');//无参也可以传参
function f4(a,b)
{
    console.log(a,b);
}
f4('x');//会有一个参数为undefined
f4('x',3,true);//第三个参数看不到。

var student=
{
	'id': 123,
	'name':'tet',
	action:function()
        {
            console.log('开始行为');
        }
}
console.log(student.name);
student.action();

variable=new XMLHttpRequest();
创建XMLHttpRequest 对象

向服务器发送请求
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

响应
responseText 获得字符串形式的响应数据。

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,th,td{
            border: 1px solid;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <button id="btn">查询</button>
    <table>
        <thead>
        <tr>
            <th>日期</th>
            <th>气温</th>
            <th>天气</th>
        </tr>
        </thead>
        <tbody id="tbMain"></tbody>
    </table>
    <script>
        request=new XMLHttpRequest();
        request.onreadystatechange=callback;
        request.open("GET","https://restapi.amap.com/v3/weather/weatherInfo?city=450323&key=506a51ad8d74c9fe798b683828368556&extensions=all");
        request.send(null);
        function callback(){
            if(request.readyState==4){
                if(request.status==200){
                    var data=request.responseText;
                    console.log(data)
                    var d=JSON.parse(data)

                    document.getElementById("btn").onclick=function(){
                        var tbody=document.getElementById("tbMain");
                        for(let i=0;i<d.forecasts[0].casts.length;i++){
                            var trow=getDataRow(d.forecasts[0].casts[i]);
                            tbody.appendChild(trow);
                        }
                    }
                    function getDataRow(h){  
                        var row = document.createElement('tr'); //创建行  
                        
                        var idCell = document.createElement('td'); //创建第一列id  
                        idCell.innerHTML = h.date; //填充数据 
                        row.appendChild(idCell); //加入行  ，下面类似  
                        
                        var nameCell = document.createElement('td');//创建第二列name  
                        nameCell.innerHTML = h.daytemp_float;  
                        row.appendChild(nameCell);  
                        
                        var jobCell = document.createElement('td');//创建第三列job  
                        jobCell.innerHTML = h.dayweather;  
                        row.appendChild(jobCell);  
                        
                        //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮  
                        
                        
                        return row; //返回tr数据      
                    } 
                }
            }
        }

    </script>
</body>
</html>

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！