Question 1: Please implement the following dynamic effect using Javascript
You can use any method or library you prefer. Aim for an elegant implementation and briefly explain the pros and cons of your solution after completing the code. Here’s my implementation using vanilla
js, which utilizes thereadonlyattribute of theinputtag. The implementation is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>第一题</title>
<style>
body {
width: 900px;
margin: 0 auto;
line-height: 30px;
}
a {
text-decoration: none;
}
.head {
background-color: #059ed3;
}
.row {
height: 30px;
border-bottom: 1px solid #888;
}
input {
margin-left: 10px;
margin-top: 6px;
border: none;
outline: none;
float: left;
}
.title {
border: 1px solid #999;
}
a {
float: right;
}
###add {
background-color: #cccccc;
width: 100%;
height: 30px;
}
###add a {
display: block;
text-align: right;
font-size: 14px;
font-weight: bolder;
color: #008000;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="head">现在共有:<strong>4</strong> 个条目</div>
<div id="list">
<div class="row">
<input type="text" value="标题" /><a href="javascript:;" class="change"
>修改</a
>
</div>
<div class="row">
<input type="text" value="标题" /><a href="javascript:;" class="change"
>修改</a
>
</div>
<div class="row">
<input type="text" value="标题" /><a href="javascript:;" class="change"
>修改</a
>
</div>
<div class="row">
<input type="text" value="标题" /><a href="javascript:;" class="change"
>修改</a
>
</div>
</div>
<div id="add"><a href="javascript:;">新增条目</a></div>
<script>
window.onload = function () {
change();
add();
};
change = function () {
var list = document.getElementById("list");
var titles = list.getElementsByTagName("input");
var changes = list.getElementsByTagName("a");
for (var i = titles.length - 1; i >= 0; i--) {
titles[i].readOnly = "readonly";
}
for (var j = changes.length - 1; j >= 0; j--) {
changes[j].index = j;
changes[j].onclick = function () {
if (this.text == "修改") {
this.text = "保存";
titles[this.index].readOnly = "";
titles[this.index].className = "title";
} else {
this.text = "修改";
titles[this.index].readOnly = "readonly";
titles[this.index].className = "";
}
};
}
};
add = function () {
var addBtn = document
.getElementById("add")
.getElementsByTagName("a")[0];
addBtn.onclick = function () {
var newRow = document.createElement("div");
newRow.className = "row";
newRow.innerHTML =
'<input type="text" value="未命名" /><a href="javascript:;" class="change">修改</a>';
var list = document.getElementById("list");
// console.log("click",list);
// e = e || window.event;
list.appendChild(newRow);
change();
// e.cancelBubble = true;
update();
};
};
update = function () {
var list = document.getElementById("list");
var lth = list.getElementsByTagName("div").length;
var count = document.getElementsByTagName("strong")[0];
count.innerHTML = lth;
};
</script>
</body>
</html>Question 2: Please explain how to modify the program to output the correct value of myName and explain why.
foo = function () {
this.myName = "Foo function.";
};
foo.prototype.sayHello = function () {
alert(this.myName);
};
foo.prototype.bar = function () {
setTimeout(this.sayHello, 1000);
};
var f = new foo();
f.bar();Because this refers to the object that calls the current method, and in the code, setTimeout is a global function (its full form is window.setTimeout). Therefore, the this inside the func parameter of setTimeout(func,time) should point to window. It can be modified as follows:
foo.prototype.bar = function () {
var That = this;
setTimeout(function () {
That.sayHello();
}, 1000);
};Question 3: Please write the corresponding HTML and CSS according to the following requirements.
Given a three-column layout structure side-by-side, from left to right: A, B, C, with widths of 180px, 600px, and 180px respectively. The requirement is to implement the following using CSS without changing the HTML structure: ABC, CBA, and BAC layouts, and make column B’s width adaptive (total width of three columns 100%) when arranged as CBA. Browser-specific CSS hacks are not allowed.
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>第三题</title>
<style>
.content {
width: auto;
margin: 0 auto;
position: relative;
height: 50px;
overflow: auto;
}
.a {
background-color: red;
width: 160px;
}
.b {
background-color: blue;
width: 600px;
}
.c {
background-color: yellow;
width: 160px;
}
.a,
.b,
.c {
height: 50px;
}
/* ABC*/
.a1,
.b1,
.c1 {
float: left;
}
/* CBA*/
.c2 {
position: absolute;
top: 0;
left: 0;
}
.a2 {
float: right;
}
.b2 {
margin-left: 160px;
width: auto;
}
/* BAC*/
.b3 {
float: left;
}
.a3 {
position: absolute;
top: 0;
left: 600px;
}
.c3 {
float: right;
}
</style>
</head>
<body>
<p>
从左至右依次为 A, B, C, 宽度分别为180px, 600px,
180px。用CSS实现：ABC，CBA，BAC
三种布局及在CBA排列下使B宽度自适应（三列总宽度100%）.
</p>
<p>ABC，结构</p>
<div class="content">
<div class="a a1">A</div>
<div class="b b1">B</div>
<div class="c c1">C</div>
</div>
<p>CBA,B宽度自适应</p>
<div class="content">
<div class="a a2">A</div>
<div class="b b2">B</div>
<div class="c c2">C</div>
</div>
<p>BAC结构</p>
<div class="content">
<div class="a a3">A</div>
<div class="b b3">B</div>
<div class="c c3">C</div>
</div>
</body>
</html>Summary
For Question 1, using the readonly attribute made the implementation relatively simple. However, based on the original problem’s demonstration, I guessed that its intended implementation method involved dynamically adding input tags and controlling their display property, which felt too cumbersome, so I didn’t use that approach.
For Question 2, my understanding of this binding in JavaScript is still not deep enough, and I need to continue learning more about it.
Question 3 was solved quite easily.
This article was published on January 15, 2015 and last updated on January 15, 2015, 3917 days ago. The content may be outdated.