一、实验内容
- 页面跳转
(1) 问题：页面中放置一个按钮，点此按钮后，浏览器窗口从当前页面 跳转到其他页面。
(2) 提示：使用 window 对象的 location 属性或 location 对象的 href 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面跳转</title>
<script src="../js/页面跳转.js" type="text/javascript"></script>
</head>
<body>
<button onclick="tiaoZhuan()">跳转页面</button>
</body>
</html>
function tiaoZhuan(){
window.location.href="https://zh.javascript.info/";
}
2.动态设置标签内容
(1) 问题：修改以下代码，使用标签代替文本框,在 标签中显示自动更新得日期时间。
<html> <body>
<input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t }
12
</script> <button onclick="int=window.clearInterval(int)">Stop interval</button>
</body> </html>
(2) 提示：为标签设置 id 属性，使用 document 对象的 getElementById()方法可以获取这个页面元素对象；使用页面元素 对象的 innerHTML 属性赋值可将文本或 HTML 标签写入它的标签中用 于显示内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态设置标签内容</title>
<script src="../js/动态设置标签内容.js" type="text/javascript"></script>
</head>
<body>
<span id="clock"></span>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
var int=self.setInterval("clock()",50);
function clock() {
var t=new Date();
document.getElementById("clock").innerText=t;
}
3.读取表单数据
(1) 问题：表单提交时，通常需要对表单实行数据有效性验证，验证数 据的前提是读取表单元素的数据。如图练习 3.1 所示的表单，在点 击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等 数据。然后用在网页上用警示框提示出用户所输入的每一项，如图 练习 3.2。
(2) 分析：通过 document 对象的 getElementById()方法或 getElementByName()方法可以访问页面的表单元素；通过表单对象 的 element 集合属性也可访问特定表单内的表单元素。文本框、密 码框的文本可以通过他们的 value 属性来获得；单选框按钮时是否 被选中可由它的 checked 属性获知，它的值可由 value 属性获取； 由列表框的 selectedIndex 属性可知被选中的项的索引，用此索引 可在列表框的 option 集合中查找到被选中的项，项有 text 属性表 示它是文本，有 vlaue 属性表示的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取表单数据</title>
<script src="../js/读取表单数据.js" type="text/javascript"></script>
</head>
<body>
<form>
<h1>会员注册</h1>
登录名：<input type="text" name="userName" id="userName" /><br>
密码：<input type="password" name="password" id="password" /><br>
确认密码：<input type="password" name="confirmPassword" id="confirmPassword" /><br>
性别：
<input type="radio" name="sex" value="male" id="male" checked/>男性
<input type="radio" name="sex" value="female" id="female" />女性<br>
年龄：
<select style="width: 80px;"id="age" name="age">
<option value =" ">--请选择--</option>
<option value ="18">18岁</option>
<option value ="19">19岁</option>
<option value ="20">20岁</option>
<option value ="21">21岁</option>
<option value ="22">22岁</option>
</select><br>
</form>
<input type="submit" name="提交" value="提交" onclick=javascrtpt:submit()>
</body>
</html>
function submit(){
var username=document.getElementById("userName").value;
var password=document.getElementById("password").value;
var confirmpassword=document.getElementById("confirmPassword").value;
var sexs=document.getElementsByName("sex");
for(var i=0;i<sexs.length;i++){
if(sexs[i].checked){
var sexs=sexs[i].value;
break;
}
}
var Age=document.getElementById("age").value;
alert("登录名："+username+"\n"
+"密码："+password+"\n"
+"确认密码："+confirmpassword+"\n"
+"性别："+sexs+"\n"
+"年龄："+Age)
}
- 自定义事件
(1) 问题： 要开发一个游戏，启动游戏，加载图片和音乐，加载完后， 渲染场景和音效，加载和渲染由不同的人负责，为了加载模块和渲染模 块互不影响，易于扩展。我们采用自定义事件来指示组件内部到底发生 了什么。完善如下 js 代码，用 CustomEvent 传递自定义事件的信息以将 该事件的图片与音乐信息能在监听函数中展示出来。如练习 1.1、1.2。
（2）提示：用 CustomEvent 创建自定义事件并赋予其事件内容描述， 再在监听函数中取出并显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<link type="text/css" rel="stylesheet" href="../css/自定义事件.css">
</head>
<body>
<button id="start">start</button>
<div id="scene"></div>
<script src="../js/自定义事件.js" type="text/javascript"></script>
</body>
</html>
var start = document.getElementById("start")
var init_img_success = false
var init_music_success = false
start.addEventListener("click",function (e){
var gameStart = new CustomEvent("gameStart",{detail:{img:"imgContent",music:"musicContent"}})
document.addEventListener("gameStart",function (e) {
console.log("使用图片创建场景...")
setTimeout(function () {
console.log("创建场景完成")
init_img_success = true
alert(gameStart.detail.img)
checkShow()
},2000)
})
document.addEventListener("gameStart",function (e) {
console.log("使用音乐创建音效...")
setTimeout(function () {
console.log("创建音效完成")
init_music_success = true
alert(gameStart.detail.music)
checkShow()
},500)
})
document.dispatchEvent(gameStart)
function checkShow() {
if(init_music_success && init_img_success){
var scene = document.getElementById("scene")
scene.className = "show"
}
}
}
)
html.body{
width: 100%;
}
#start{
width: 100px;
height: 40px;
background: #262626;
margin: 10px;
color: #ffffff;
}
#scene{
width: 400px;
height: 200px;
background: #262626;
margin: 50px auto;
color: #ffffff;
}
.show#scene{
background-color: #26a9ff;
transition: background-color 3s;
}
- 正方形的动画
(1)问题： 1.点击按钮，正方形开始右移动 2.正方形同时进行放大，放大与移动效果如图练习 2.1 起始图， 练习 2.2 过程图，练习 2.3 结束图
(2) 提示：用 document 对象的 getElementById()方法获取正方形元素 并通过改变位置信息、width 和 height 来实现动画效果，利用计时 器实现移动效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验2</title>
<link type="text/css" rel="stylesheet" href="../css/正方形的动画.css">
</head>
<body>
<a onclick="btn()">
<div id="box"></div>
</a>
<script src="../js/正方形的动画.js"></script>
</body>
</html>
var box=document.getElementById('box');
//速度
var index=10;
//定时器编号
var b;
//添加向右点击事件
function btn(){
b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
}
//box移动位置
function getMove(index){
//获取box的左距离
var left=window.getComputedStyle(box,null).left;
var height = window.getComputedStyle(box,null).height;
var width = window.getComputedStyle(box,null).width;
//转换为数值
left=parseInt(left);
height=parseInt(height);
width=parseInt(width);
if(left>=500){
clearInterval(b);
}
else{
box.style.left = left+index+'px'//计算box的左距离
box.style.height = height+index+'px';
box.style.width = width+index+'px';
}
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0px;
left: 0px;
}
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
