百度前端技术学院—零基础学院 第二十二天到第二十四天：JavaScript里面的居民们
1.数字类型操作
按照HTML中按钮的描述以此实现功能计算结果显示在 id 为 result 的 P 标签中除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<div>
<label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
<label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
</div>
<div>
<button id="p0" onclick="aa()">判断当前选中的输入框输入内容是否为数字</button>
<br>
<button id="p1" onclick="bb()">把 A 四舍五入为 B 个小数位数的数字</button>
<br>
<button id="p2" onclick="cc()">当前选中数字的绝对值</button>
<br>
<button id="p3" onclick="dd()">对当前选中的数字进行上舍入</button>
<br>
<button id="p4" onclick="ee()">对当前选中的数字进行下舍入</button>
<br>
<button id="p5" onclick="ff()">把当前选中的数字四舍五入为最接近的整数</button>
<br>
<button id="p6" onclick="gg()">返回 A 和 B 中的最高值</button>
<br>
<button id="p7" onclick="hh()">返回 A 和 B 中的最低值</button>
<br>
</div>
<p id="result"></p>
<script type="text/javascript">
function aa(){ //判断当前选中的输入框输入内容是否为数字
console.log("判断当前选中的输入框输入内容是否为数字");
var radios = document.getElementsByName("math-obj");
var j=0;
for(var i=0;i<radios.length;i++){
if(radios[i].checked==true){
j=1;
}
}
if(j==0){
alert("没有选中！");
return ;
}
var val = document.getElementById("radio-a");
if(val.checked==true){
var va = document.getElementById("num-a");
if(va.value==""){
alert("输入为空");
}
else{
if(isNaN(va.value)){
var texts = document.getElementById("result");
texts.innerHTML =va.value + "不是数字";
//console.log(va.value + "不是数字");
}
else{
//console.log(va.value + "是数字");
var texts = document.getElementById("result");
texts.innerHTML =va.value + "是数字";
}
}
}
else{
var va = document.getElementById("num-b");
if(va.value==""){
alert("输入为空");
}
else{
if(isNaN(va.value)){
//console.log(va.value + "不是数字");
var texts = document.getElementById("result");
texts.innerHTML =va.value + "不是数字";
}
else{
//console.log(va.value + "是数字");
var texts = document.getElementById("result");
texts.innerHTML =va.value + "是数字";
}
}
}
}
function bb(){ //把 A 四舍五入为 B 个小数位数的数字
console.log("把 A 四舍五入为 B 个小数位数的数字");
var v1 = document.getElementById("num-a");
var v2 = document.getElementById("num-b");
//console.log("把 A 四舍五入为 B 个小数位数的数字" + parseFloat(v1.value).toFixed(parseInt(v2.value)));
var texts = document.getElementById("result");
texts.innerHTML ="把 A 四舍五入为 B 个小数位数的数字" + parseFloat(v1.value).toFixed(parseInt(v2.value));
}
function cc(){ //当前选中数字的绝对值
console.log("当前选中数字的绝对值");
var radios = document.getElementsByName("math-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
alert("未选中");
return ;
}
var val = document.getElementById("radio-a");
if(val.checked==true)
{
var va = document.getElementById("num-a");
//console.log("当A中数字的绝对值" + Math.abs(Number(va.value)));
var texts = document.getElementById("result");
texts.innerHTML ="当A中数字的绝对值" + Math.abs(Number(va.value));
}
else
{
var vb = document.getElementById("num-b");
//console.log("当B中数字的绝对值" + Math.abs(Number(vb.value)));
var texts = document.getElementById("result");
texts.innerHTML ="当B中数字的绝对值" + Math.abs(Number(vb.value));
}
}
function dd(){ //对当前选中的数字进行上舍入,这里只适用于正数
console.log("对当前选中的数字进行上舍入");
var radios = document.getElementsByName("math-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
alert("未选中");
return ;
}
var val = document.getElementById("radio-a");
if(val.checked==true)
{
var va = document.getElementById("num-a");
var vaI = parseInt(va.value);
var vaF = parseFloat(va.value);
if(vaI < vaF)
{
vaI=vaI+1;
//console.log("对A中的数字进行上舍入" + vaI);
var texts = document.getElementById("result");
texts.innerHTML ="对A中的数字进行上舍入" + vaI;
}
else if(vaI == vaF)
{
//console.log("对A中的数字进行上舍入" + vaI);
var texts = document.getElementById("result");
texts.innerHTML ="对A中的数字进行上舍入" + vaI;
}
}
else{
var vb = document.getElementById("num-b");
var vbI = parseInt(vb.value);
var vbF = parseFloat(vb.value);
if(vbI < vbF)
{
vbI=vbI+1;
//console.log("对B中的数字进行上舍入" + vbI);
var texts = document.getElementById("result");
texts.innerHTML ="对B中的数字进行上舍入" + vbI;
}
else if(vbI == vbF)
{
//console.log("对B中的数字进行上舍入" + vbI);
var texts = document.getElementById("result");
texts.innerHTML ="对B中的数字进行上舍入" + vbI;
}
}
}
function ee(){ //对当前选中的数字进行下舍入
console.log("对当前选中的数字进行下舍入");
var radios = document.getElementsByName("math-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
alert("未选中");
return ;
}
var val = document.getElementById("radio-a");
if(val.checked==true)
{
var va = document.getElementById("num-a");
var vaI = parseInt(va.value);
//console.log("对A中的数字进行下舍入" + vaI);
var texts = document.getElementById("result");
texts.innerHTML ="对A中的数字进行下舍入" + vaI;
}
else{
var vb = document.getElementById("num-b");
var vbI = parseInt(vb.value);
//console.log("对B中的数字进行下舍入" + vbI);
var texts = document.getElementById("result");
texts.innerHTML ="对B中的数字进行下舍入" + vbI;
}
}
function ff(){ //把当前选中的数字四舍五入为最接近的整数
console.log("把当前选中的数字四舍五入为最接近的整数");
var radios = document.getElementsByName("math-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
alert("未选中");
return ;
}
var val = document.getElementById("radio-a");
if(val.checked==true)
{
var va = document.getElementById("num-a");
//console.log("把A中的数字四舍五入为最接近的整数" + (Number(va.value)).toFixed(0));
var texts = document.getElementById("result");
texts.innerHTML ="把A中的数字四舍五入为最接近的整数" + (Number(va.value)).toFixed(0);
}
else{
var vb = document.getElementById("num-b");
//console.log("把B中的数字四舍五入为最接近的整数" + (Number(vb.value)).toFixed(0));
var texts = document.getElementById("result");
texts.innerHTML ="把B中的数字四舍五入为最接近的整数" + (Number(vb.value)).toFixed(0);
}
}
function gg() //返回 A 和 B 中的最高值
{
console.log("返回 A 和 B 中的最高值");
var va = document.getElementById("num-a");
var vb = document.getElementById("num-b");
if(va.value>=vb.value)
{
//console.log("A，B中最大值：" + va.value);
var texts = document.getElementById("result");
texts.innerHTML ="A，B中最大值：" + va.value;
}
else
{
//console.log("A，B中最大值：" + vb.value);
var texts = document.getElementById("result");
texts.innerHTML ="A，B中最大值：" + vb.value;
}
}
function hh() //返回 A 和 B 中的最低值
{
console.log("返回 A 和 B 中的最低值");
var va = document.getElementById("num-a");
var vb = document.getElementById("num-b");
if(va.value>=vb.value)
{
//console.log("A，B中最小值：" + vb.value);
var texts = document.getElementById("result");
texts.innerHTML ="A，B中最小值：" + vb.value;
}
else
{
//console.log("A，B中最小值：" + va.value);
var texts = document.getElementById("result");
texts.innerHTML ="A，B中最小值：" + va.value;
}
}
</script>
</body>
2.字符串类型操作
按照HTML中按钮的描述以此实现功能计算结果显示在 id 为 result 的 P 标签中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<div>
<label>String A:
<input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
</label>
<textarea id="str-a"></textarea>
<label>String B:
<input id="radio-b" type="radio" name="str-obj" value="b">
</label>
<textarea id="str-b"></textarea>
<label>Num A：<input id="num-a" type="number" value="0"></label>
<label>Num B：<input id="num-b" type="number" value="1"></label>
</div>
<div>
<button onclick="aa()">获取当前选中输入的内容长度</button>
<button onclick="bb()">当前选中输入中的第3个字符</button>
<button onclick="cc()">把两个输入框的文字连接在一起输出（concat）</button>
<button onclick="dd()">输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
<button onclick="ee()">输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
<button onclick="ff()">使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
<button onclick="gg()">当前选中输入框的行数</button>
<button onclick="hh()">使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
<button onclick="ii()">把所选输入框中的内容全部转为大写</button>
<button onclick="jj()">把所选输入框中的内容全部转为小写</button>
<button onclick="kk()">把所选输入框中内容的半角空格全部去除</button>
<button onclick="ll()">把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
</div>
<p id="result"></p>
<!--
var text_p = document.getElementById("result");
text_p.innerHTML="";
-->
<script>
function Print(s){ //在p标签输出
var text_p = document.getElementById("result");
text_p.innerHTML=s;
}
function aa(){
var radios = document.getElementsByName("str-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
console.log("未选中！");
return ;
}
var radioA = document.getElementById("radio-a");
if(radioA.checked==true)
{
var texts = document.getElementById("str-a");
Print("A当前选中输入的内容长度:" + texts.value.length);
}
else
{
var texts = document.getElementById("str-b");
Print("A当前选中输入的内容长度:" + texts.value.length);
}
}
function bb(){
var radios = document.getElementsByName("str-obj");
var j=0;
for(var i=0;i<radios.length;i++)
{
if(radios[i].checked==true)
{
j=1;
}
}
if(j==0)
{
console.log("未选中！");
return ;
}
var radioA = document.getElementById("radio-a");
if(radioA.checked==true)
{
var texts = document.getElementById("str-a");
Print(texts.value[2]);
}
else
{
var texts = document.getElementById("str-b");
Print(texts.value[2]);
}
}
function cc(){
var va = document.getElementById("str-a");
var vb = document.getElementById("str-b");
Print(va.value.concat(vb.value));
}
function dd(){
var va = document.getElementById("str-a");
var vb = document.getElementById("str-b");
Print(va.value.indexOf(vb.value));
}
function ee(){
var va = document.getElementById("str-a");
var vb = document.getElementById("str-b");
Print(va.value.lastIndexOf(vb.value));
}
function ff(){
var va = Number(document.getElementById("num-a").value);
var vb = Number(document.getElementById("num-b").value);
Print(texts.value.slice(va,vb));
}
function gg(){
}
function hh(){
var texts = document.getElementById("str-a");
var va = Number(document.getElementById("num-a").value);
var vb = Number(document.getElementById("num-b").value);
Print(texts.value.substr(va,vb));
}
function ii()
{
var texts = document.getElementById("str-a");
Print(texts.value.toUpperCase());
}
function jj()
{
var texts = document.getElementById("str-a");
Print(texts.value.toLowerCase());
}
function kk()
{
var texts = document.getElementById("str-a");
Print(texts.value.replace(/\s*/g,""));
}
function ll()
{
var texts = document.getElementById("str-a");
var text_b = document.getElementById("str-b");
var text = texts.value;
var texts_new;
for(var i=0;i<texts.value.length;i++){
texts_new = text.replace("a",text_b.value);
if(text == texts_new)
{
Print(texts_new);
return ;
}
text=texts_new;
}
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/*
实现一个字符串头尾去除空格的函数
注意需要去除的空格，包括全角、半角空格
暂时不需要学习和使用正则表达式的方式
*/
function diyTrim(str) {
var result = "";
result = str.replace(/^\s*|\s*$/g,"");
return result
}
// 测试用例
console.log(diyTrim(' a f b ')); // ->a f b
console.log(diyTrim(' ffdaf ')); // ->ffdaf
console.log(diyTrim('1 ')); // ->1
console.log(diyTrim(' f')); // ->f
console.log(diyTrim(' a f b ')); // ->a f b
console.log(diyTrim(' ')); // ->
console.log(diyTrim(' ')); // ->
console.log(diyTrim('')); // ->
/*
去掉字符串str中，连续重复的地方
*/
function removeRepetition(str) {
var result = "";
for(var i=0 ; i < str.length ; i++)
{
result += str[i];
for(var j=i+1 ; j < str.length ; j++)
{
if(str[i] != str[j])
{
i=j-1;
break ;
}
if(j==str.length-1)
return result;
}
}
return result;
}
// 测试用例
console.log(removeRepetition("aaa")); // ->a
console.log(removeRepetition("abbba")); // ->aba
console.log(removeRepetition("aabbaabb")); // ->abab
console.log(removeRepetition("")); // ->
console.log(removeRepetition("abc")); // ->abc
</script>
</body>
</html>
3.二叉树
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var tree = {
"id": 0,
"name": "root",
"left": {
"id": 1,
"name": "Simon",
"left": {
"id": 3,
"name": "Carl",
"left": {
"id": 7,
"name": "Lee",
"left": {
"id": 11,
"name": "Fate"
}
},
"right": {
"id": 8,
"name": "Annie",
"left": {
"id": 12,
"name": "Saber"
}
}
},
"right": {
"id": 4,
"name": "Tony",
"left": {
"id": 9,
"name": "Candy"
}
}
},
"right": {
"id": 2,
"name": "right",
"left": {
"id": 5,
"name": "Carl",
},
"right": {
"id": 6,
"name": "Carl",
"right": {
"id": 10,
"name": "Kai"
}
}
}
}
// 假设id和name均不会重复，根据输入name找到对应的id
function findIdByName(tree,name) {
if(tree.name==name)
{
console.log(name+"-->"+tree.id);
}
if(tree.left!=null)
{
findIdByName(tree.left,name);
}
if(tree.right!=null)
{
findIdByName(tree.right,name);
}
}
// 假设id和name均不会重复，根据输入id找到对应的name
function findNameById(tree,id) {
if(tree.id==id)
{
console.log(id+"-->"+tree.name);
}
if(tree.left!=null)
{
findNameById(tree.left,id);
}
if(tree.right!=null)
{
findNameById(tree.right,id);
}
}
// 把这个对象中所有的名字以“前序遍历”的方式全部输出到console中
function getListWithDLR(tree) {
console.log(tree.id);
if(tree.left!=null)
{
getListWithDLR(tree.left);
}
if(tree.right!=null)
{
getListWithDLR(tree.right);
}
}
// 把这个对象中所有的名字以“中序遍历”的方式全部输出到console中
function getListWithLDR(tree) {
if(tree.left!=null)
{
getListWithLDR(tree.left);
}
console.log(tree.id);
if(tree.right!=null)
{
getListWithLDR(tree.right);
}
}
// 把这个对象中所有的名字以“后序遍历”的方式全部输出到console中
function getListWithLRD(tree) {
if(tree.left!=null)
{
getListWithLRD(tree.left);
}
if(tree.right!=null)
{
getListWithLRD(tree.right);
}
console.log(tree.id);
}
console.log("通过name找id：")
findIdByName(tree,"Candy");
console.log("通过id找name：")
findNameById(tree,10);
console.log("先序遍历（根，左，右）：");
getListWithDLR(tree);
console.log("中序遍历（左，根，右）：");
getListWithLDR(tree);
console.log("后序遍历（左，右，根）：");
getListWithLRD(tree);
</script>
</body>
</html>
4.栈操作
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="stack-input" type="text">
<p id="stack-cont">栈内容：apple->pear</p>
<button id="push-btn" onclick="aa()">进栈</button>
<button id="pop-btn" onclick="bb()">退栈</button>
<button id="font-btn" onclick="cc()">打印栈顶元素内容</button>
<button id="empty-btn" onclick="dd()">判断栈是否为空</button>
<script>
var stack = ["apple", "pear"];
function Print(){
var text = document.getElementById("stack-cont");
text.innerHTML=stack;
}
function aa(){
var text = document.getElementById("stack-input");
stack.push(text.value);
Print();
}
function bb(){
stack.pop();
Print();
}
function cc(){
console.log(stack[stack.length-1]);
Print();
}
function dd(){
if(stack[0]==null)
{
console.log("为空！");
}
else
{
console.log("不为空！");
}
Print();
}
</script>
</body>
</html>
5.队列
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="queue-input" type="text">
<p id="queue-cont">队列内容：apple->pear</p>
<button id="in-btn" onclick="aa()">入队</button>
<button id="out-btn" onclick="bb()">出队</button>
<button id="font-btn" onclick="cc()">打印队头元素内容</button>
<button id="empty-btn" onclick="dd()">判断队列是否为空</button>
<script>
var queue = ["apple", "pear"];
function Print(){
var text = document.getElementById("queue-cont");
text.innerHTML=queue;
}
function aa(){
var text = document.getElementById("queue-input");
queue.push(text.value);
console.log("添加元素成功："+text.value);
Print();
}
function bb(){
console.log("出队成功："+queue.shift());
Print();
}
function cc(){
console.log(queue[0]);
Print();
}
function dd(){
if(queue[0] == null)
{
console.log("空");
Print();
}
else{
console.log("不为空");
Print();
}
}
</script>
</body>
</html>
