这篇博客探讨了网页中的对象概念，包括节点层级、自定义函数和二级联动。接着，介绍了JSON作为数据交换格式的特点，强调其简洁性和独立于编程语言的特性。文章还涉及JSON的嵌套结构、解析过程以及与字符的转换。最后，讲解了如何创建一个简单的网页版计算器。
一、对象
（一）节点：节点的层级关系,父子关系,兄弟关系
节点的类型: 标签节点,注释节点,文本节点
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var nodes = document.all;
for (var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName + "===" + nodes[i].nodeType);
}
var chs = document.body.lastElementChild.childNodes;
for (var i = 0; i <chs.length; i++) {
alert(chs[i].nodeName + "===" + chs[i].nodeType);
}
var chs = document.body.firstElementChild.nextElementSibling.childNodes;
for (var i = 0; i <chs.length; i++) {
//alert(chs[i].nodeName + "===" + chs[i].nodeType);
if(chs[i].nodeType==1){
chs[i].style.color="red";
}
}
}
</script>
</head>
<body>
<!-- 注释 -->
<div>
<h1>aabc</h1>
</div>
<div>
<h1>aabcsfsdfsdfsdf</h1>
<h1>aabcsfsdfsdfsdf</h1>
</div>
</body>
</html>
（二）自定义函数
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
//构造函数
function Student(name,age){
//alert("构造函数调用了");
//alert(this);
this.name=name;
this.age=age;
this.eat=function(){
alert("吃饭");
}
};
var stu=new Student("张三",23);
alert(stu.name);
alert(stu.age);
stu.eat();
var stu2=new Student("李四",24);
alert(stu2.name);
alert(stu2.age);
stu2.eat();
*/
var obj=new Object();
obj.name="战三";
obj.age=23;
obj.eat=function(){
alert("吃法");
}
alert(obj.name)
alert(obj.age);
obj.eat();
</script>
</head>
<body>
</body>
</html>
（三）二级联动
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="sf" onchange="selecSF()">
<option value ="">--省份--</option>
<option value ="">陕西</option>
<option value ="">河南</option>
</select>
<select id="citys">
<option value ="">--请选择城市--</option>
</select>
</body>
<script type="text/javascript">
/*
当我选择了省份后，后面的下拉框的内容要变成这个省份对应的城市
*/
//省市二级联动
//获取省份这个标签对象
var arr=[[],["请选择城市","西安","商洛","宝鸡","咸阳","铜川","渭南","汉中","安康","榆林","延安"],["请选择城市","商丘","郑州","驻马店","南阳","洛阳","开封"]];
var sheng=document.getElementById("sf");
var city=document.getElementById("citys");
function selecSF(){
//清空旧数据
city.innerHTML="";
//alert("选择而来");
var index=sheng.selectedIndex;
//alert(index);
var citys=arr[index];
for(var i=0;i<citys.length;i++){
//取出这个省份对应的一维数组里面的城市,显示到第二个下来框
//创建option对象
var op=document.createElement("option");
//创建文本对象
var text=document.createTextNode(citys[i]);
//把文本对象放到option之间
op.appendChild(text);
//把option放到select之间
city.appendChild(op);
}
}
</script>
</html>
二、JSON
（一）嵌套对象
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var json = {
name: '张三',
age: '23',
data: {
sonname: 'sonson',
sonage: 100,
},
arr:[10,30,40],
method:function(){
alert("abc");
},
//ES6的语法
test(){
alert("test");
},
// test:function(){ 上面不简写
//
// }
};
//取sonson
var name=json.data.sonname;
alert(name);
var v=json.arr
var num=v[2];
alert(num);
json.method();
json.test();
//还有一种封装形式 数组的元素放的是JSON对象
var jsonArr=[{'name':'张三',age:23},{'name':'李四',age:24},{'name':'王五',age:25}];
var v=jsonArr[0].name;
alert(v);
for(index in jsonArr){
var obj=jsonArr[index];
for(key in obj){
alert(key+"==="+obj[key]);
}
}
</script>
</head>
<body>
</body>
</html>
（二）对象
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
// 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，
// 采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得
// JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//如何定义JSON对象{'键名':值,键名2':值2};
var stuJSON={'name':'张三','age':23,'sex':true};
//取数据:方式1:键找值
var name=stuJSON.name;
alert(name);
alert(stuJSON.age);
alert(stuJSON.sex);
//方式2:
var name2=stuJSON['name'];
alert(name2)
alert("下面的")
//如何遍历JSON对象
for(key in stuJSON){
alert(stuJSON[key]);
}
alert("下面的数组")
//遍历数组 for in
var arr=["aaa","bbbb","cccc","dddd"];
for(index in arr){
alert(arr[index]);
}
// String stu="{'name':'张三','age':23,'sex':true}"
</script>
</head>
<body>
</body>
</html>
（三）解析
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="300px" height="200px">
<tr>
<td id="td1">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<script type="text/javascript">
// https://www.apiopen.top/weatherApi?city=%E6%88%90%E9%83%BD 天气预报的接口
// var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
// var str = '{"name":"runoob", "alexa":10000, "site":"www.runoob.com","dataJSON":{"num":100},"myJSON":{"hehe":"haha"}}'
// var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
// alert(obj.myJSON.hehe);
// var jsonStr =
// '{"code":200,"message":"成功!","result":"因有人恶意刷接口，导致接口调用频繁，接口已经不能稳定运行，所以计划近期下线，积德吧朋友，如果长期如此，所有接口将面临关闭"}';
//
//JSON语法的严谨格式,不要格式化,紧凑风格,键值对不要有换行空格
var jsonStr =
'{"code":200,"msg":"成功!","data":{"yesterday":{"date":"18日星期二","high":"高温 27℃","fx":"无持续风向","low":"低温 20℃","fl":"\u003c![CDATA[\u003c3级]]\u003e","type":"阴"},"city":"成都","aqi":null,"forecast":[{"date":"19日星期三","high":"高温 27℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 20℃","fengxiang":"无持续风向","type":"多云"},{"date":"20日星期四","high":"高温 30℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 22℃","fengxiang":"无持续风向","type":"多云"},{"date":"21日星期五","high":"高温 29℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 21℃","fengxiang":"无持续风向","type":"阵雨"},{"date":"22日星期六","high":"高温 26℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"},{"date":"23日星期天","high":"高温 23℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"}],"ganmao":"各项气象条件适宜，无明显降温过程，发生感冒机率较低。","wendu":"26"}}'
var obj = JSON.parse(jsonStr); //JSON.parse()这个方法,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)
//alert(obj);
var sonJSON=obj.data.yesterday;
//sonJSON.date
// document.getElementById("td1").innerText=sonJSON.date;
var tds=document.getElementsByTagName("td");
var keyarr=new Array();
for(key in sonJSON){
keyarr.push(key);
}
//alert(keyarr);
// for(var i=0;i<tds.length;i++){
// tds[i].innerText=sonJSON.keyarr[i];
// }
for(index in tds){
//alert(index);
tds[index].innerText=sonJSON[keyarr[index]];
}
</script>
</body>
</html>
（四）JSON对象和字符互换
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
//
// 我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：
//外面是单引号 注意:单引号括JSON对象,就变成JSON字符串
var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
alert(obj.name);
var loginJSON={"username":"zhangsan","password":"123456"};
var jsonString=JSON.stringify(loginJSON); //把JSON对象变成JSON字符串
alert(jsonString);
alert(typeof jsonString);
</script>
</head>
<body>
</body>
</html>
三、简单网页版计算器
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
input {
width: 336px;
height: 90px;
font-size: 50px;
}
input:disabled {
background: greenyellow;
}
td {
text-align: center;
font-size: 30px;
width: 100px;
}
td:hover {
background: yellowgreen;
cursor: pointer;
}
#div1{
border="0";
cellspacing="0" ;
cellpadding="0px" ;
align="center" ;
background-image:url(img/c2.jpg);
}
#div2{
margin-left:800px;
width:350px;
height:100%;
}
#topTime{
height:60px;
width:350px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1" >
<div id="div2" >
<div id="topTime" onselectstart="return false" style=";" >
</div>
<div id="" style="border: 5px #FBF9FA solid;cellpadding=0px;">
<input type="text" name="" id="show" value="0" disabled="disabled" />
</div>
<table border="1" cellpadding="0" height="450px" width="350px">
<tr>
<td id="clear">AC</td>
<td id="del">退格</td>
<td>%</td>
<td class="czf">÷</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="czf">×</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="czf">－</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="czf">＋</td>
</tr>
<tr>
<td colspan="2" class="num">0</td>
<td class="num" id="point">.</td>
<td id="result">=</td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
/* 思路：1.布局页面
2.页面按键分为三类 数字和小数点归为一类，操作符归为一类， 退格 等号 清除 显示框 单独的
3.通过id 或者class 先获取出这些dom元素
4.把我们点的数字显示上去,我们需要给所有数字设置点击事件
*/
//找到顶部时间栏
var timeTop = document.getElementById("topTime");
showTime();
var cycleTime = setInterval(showTime, 500);
function showTime() {
var date=new Date();
var time=date.toLocaleDateString();
var time=date.toLocaleString(); //2019/6/14 上午10:17:31
timeTop.innerHTML = time;
}
var show_result = document.getElementById("show"); //获取显示框
var clear_btn = document.getElementById("clear"); //获取清除键
var del_btn = document.getElementById("del"); //获取退格键
var result_btn = document.getElementById("result"); //获取等号
var nums = document.getElementsByClassName("num"); //获取所有的数字键
var czfs = document.getElementsByClassName("czf"); //获取所有的操作符键
//定义三个变量,来存储第一个数字,第二个数字,运算符
var numValue1 = '';
var numValue2 = '';
var ysf = '';
//给数字置点击
// for (var i = 0; i < nums.length; i++) {
// nums[i].onclick = function() {
// //取出标签之间的数字
// numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
// //alert(v);
// show_result.value = numValue1;
// }
// }
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function() {
//取出标签之间的数字
if(this.innerText=="."){
if(numValue1.indexOf('.') ==-1){
numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
}else if(numValue1.indexOf('.') ==2){
numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
numValue1 = numValue1.substring(0, numValue1.length - 1);
}
} else{
if(numValue1.charAt(0)=='.'){
numValue1='0' + numValue1;
}
numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
}
show_result.value = numValue1;
}
}
//给操作符设置点击事件
for (var i = 0; i < czfs.length; i++) {
czfs[i].onclick = function() {
if(numValue2==''){
//当你点击操作符号时:我们把第一个数字,给第二个数字,然后把第一个数字清空,用来接收用户下次的输入
//保存操作符
numValue2 = numValue1;
numValue1 = '';
ysf = this.innerText;
}else{
//处理四则运算
//把上一次两个数运算的结果算出来,赋值给numValue2 再把numValue1清空,去接收下一次的输入
resultFun();
ysf = this.innerText;
}
}
}
//给等号设置监听,运算结果
result_btn.onclick = function() {
resultFun();
}
function resultFun() {
//把两个字符串数字,转成数字类型
var one = Number(numValue2);
var two = Number(numValue1);
var r = 0;
switch (ysf) {
case '＋':
r = one + two;
break;
case '－':
r = one - two;
break;
case '×':
r = one * two;
break;
case '÷':
if (two == 0) {
clean();
r = 0;
alert("除数不能为0");
} else {
r = one / two;
}
break;
}
numValue2=r;
numValue1='';
show_result.value =numValue2;
}
//实现退格键
del_btn.onclick = function() {
tuige();
}
function tuige(){
if (numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
show_result.value = numValue1;
}
//else{
// numValue1='';
// numValue2='';
// ysf='';
// show_result.value ='0';
// }
}
//实现清除键
var clean = function() {
numValue1 = '';
numValue2 = '';
ysf = '';
show_result.value = '0';
}
clear_btn.onclick = clean;
</script>
</html>
扫一扫
2611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
