test1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body onkeydown="_key()">
<input id="name" type="text">
<button id="submit-btn">Submit</button>
<script>
var btn = document.getElementById("submit-btn");
function output() {
console.log(document.getElementById("name").value);
}
// 当点击按钮 submit-btn 时,在console中输出 name 中的内容
btn.onclick = output;
function _key() {
// 在输入过程中,如果按回车键,则同样执行上一条的需求
if (event.keyCode == 13) {
output();
}
// 在输入过程中,如果按 ESC 键,则把输入框中的内容清空
if (event.keyCode == 27) {
document.getElementById("name").value = "";
}
}
</script>
</body>
</html>
test2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
select {
display: none;
}
.select {
display: block;
}
.non-select {
display: none;
}
</style>
</head>
<body>
<label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
<script>
var input1 = document.getElementById("school");
var input2 = document.getElementById("company");
// 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项
input1.onclick = function() {
document.getElementById("school-select").className = "select";
document.getElementById("company-select").className = "non-select";
}
// 当用户选择了 School 的单选框时,显示 Company 的下拉选项,隐藏 School 的下拉选项
input2.onclick = function() {
document.getElementById("company-select").className = "select";
document.getElementById("school-select").className = "non-select";
}
</script>
</body>
</html>
test3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
// 点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色
var list = document.querySelectorAll("li");
for (var i = 0, len = list.length; i < len; i++) {
list[i].onclick = function (e) {
var c = e.target.style.backgroundColor;
var p = document.getElementsByClassName("color-picker")[0];
p.innerHTML = c;
p.style.color = c;
}
}
</script>
</body>
</html>
test4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
.palette {
margin: 0;
padding: 0;
list-style: none;
}
.palette li {
width: 40px;
height: 40px;
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="palette">
<li style="background-color:crimson"></li>
<li style="background-color:bisque"></li>
<li style="background-color:blueviolet"></li>
<li style="background-color:coral"></li>
<li style="background-color:chartreuse"></li>
<li style="background-color:darkolivegreen"></li>
<li style="background-color:cyan"></li>
<li style="background-color:#194738"></li>
</ul>
<p class="color-picker"></p>
<script>
// 点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色
// 事件代理方式
window.onload = function () {
var ul = document.getElementsByClassName("palette")[0];
ul.onclick = function (e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == "li") {
document.getElementsByClassName("color-picker")[0].innerHTML = target.style.backgroundColor;
document.getElementsByClassName("color-picker")[0].style.color = target.style.backgroundColor;
}
}
}
</script>
</body>
</html>
test5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
<script>
var obj = document.getElementById("fade-obj");
var btn = document.getElementById("fade-btn");
var i = 1;
function fadeout() {
obj.style.opacity = i;
i -= 0.1;
btn.disabled = true;
if (i > 0) {
setTimeout(fadeout, 100);
console.log(i);
} else if (i <= 0) {
btn.innerHTML = "淡入";
btn.disabled = false;
btn.addEventListener("click", fadein);
}
}
function fadein() {
obj.style.opacity = i;
i += 0.1;
btn.disabled = true;
if (i < 1) {
setTimeout(fadein, 100);
console.log(i);
} else if (i >= 1) {
btn.innerHTML = "淡出";
btn.disabled = false;
btn.addEventListener("click", fadeout);
}
}
btn.addEventListener("click", fadeout);
</script>
</body>
</html>
test6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
<script>
var btn = document.getElementById("fade-btn");
var obj = document.getElementById("fade-obj");
var i = 1;
var flag = null;
var flag1 = null;
function fadeout() {
obj.style.opacity = i;
i -= 0.1;
btn.disabled = true;
if (i <= 0) {
clearInterval(flag);
btn.innerText = '淡入';
btn.disabled = false;
btn.addEventListener('click', function () {
flag1 = setInterval(fadein, 100);
});
}
}
function fadein() {
obj.style.opacity = i;
i += 0.1;
btn.disabled = true;
if (i >= 1) {
clearInterval(flag1);
btn.innerText = '淡出';
btn.disabled = false;
btn.addEventListener('click', function () {
flag = setInterval(fadeout, 100);
});
}
}
function start() {
flag = setInterval(fadeout, 100);
}
btn.addEventListener('click', start);
</script>
</body>
</html>
test7
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 480px;
height: 480px;
background: url("erik.jpg");
}
</style>
</head>
<body>
<div id="ani"></div>
<script>
window.onload = function () {
var ani = document.getElementById("ani");
var Y = 480;
function gif() {
ani.style.backgroundPositionY = '-' + Y + 'px';
Y > 8160 ? Y = 480 : Y += 480;
}
setInterval(gif, 100);
}
</script>
</body>
</html>