Web前端实验实验报告2
- 格式：docx
- 大小：1.08 MB
- 文档页数：13
<span index="5"></span>
</div>
</div>
</body>
</html>
实验4
运行效果：
效果实现：
通过调取系统时间，在时间边上显示自己的名字。底下用程序计时的月从0开始取值后+1，获取到当前的年月日，以1000毫秒为单位，对动态变化的时间进行计数。
代码：
<!DOCTYPE html>
<label for="yonghuming">用户名：</label><input id="yonghuming" type="text" name="username"><br>
<label for="mima">密码：</label><input id="mima" type="password" name="password"><br>
bottom: 20px;
right: 20px;
}
#anniu span {
cursor: pointer;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
margin-right: 5px;
}
#anniu .on {
Web前端实验
题目：JavaScript基础
班级：
计G191
学号：
2019322027
姓名：
刘祎
指导教师：
温春水
2020年3月9日·北京
信息工程学院
实验
运行效果：
功能实现：
在js里加入循环循环，每执行完一次操作乘数+1，一次挨个输出。达到乘法表效果
代码:
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#dingshi {
width:150px;
height:100px;
color:green;
font-size: 50px;
text-align:center;
line-height:50px;
var buttons=document.getElementById('anniu').getElementsByTagName('span');
var index=1;
function showbutton(){
for(var i=0; i<buttons.length; i++){
if(buttons[i].className=='on'){
var time = new Date(); // 程序计时的月从0开始取值后+1
var m = time.getMonth() + 1;
var ti = time.getFullYear() + "年" + m + "月"
+ time.getDate() + "日" + " " + time.getHours() + ":"
list.style.left=list.offsetLeft-600*(myindex-index)+'px';//
index=myindex;
showbutton()
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="tupian" style="left: -600px;">
<label for="qrmima">确认密码：</label><input id="qrmima" type="password" name="conpassword"><br>
<input type="submit" name="button" value="立即注册" onclick="return Check()" >
background: red;
}
</style>
<script type="text/javascript">
window.onload=function (){
var container=document.getElementById('box');
var list=document.getElementById('tupian');
}
}
</script>
</head>
<body>
</body>
</html>
实验2
运行效果：
功能实现：
加入了判断语句，对用户名和密码进行判断，根据用户名长度和密码一致性弹出不同窗口
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<img src="1.jpg" alt="5"/>
</div>
<div id="anniu">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
<style type="text/css">
#box{
margin-left: 15ห้องสมุดไป่ตู้px;
font-size:30px;
float: left;
}
h5{
margin-left: 550px;
<div id="dingshi"></div>
</body>
</html>
实验心得：
在此次实验过程中，充分用到了js的代码，，发现自己还有很多不足，对函数创建的掌握程度还不是很牢固。基础还不是很扎实，希望可以继续学习，掌握基础知识。多练习js的代码，函数的应用。
c.innerHTML=a;
a++;
}, 1000)
</script>
</body>
</html>
实验五
运行效果：
效果实现：
界面倒计时60秒后停止，建立函数获取倒计时的id，并设置总数为60，以1000毫秒为单位，当数字大于0时就－1，直到倒计时结束停止计时。
代码：
<!DOCTYPE html>
<html>
</form>
实验3
运行效果：
功能实现：
实现轮播图展示，对小圆点设置点击效果，对每个照片设置id，点对应的小圆点跳转到对应的id图片上。其余图片用hidden进行隐藏，达到转换效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
timer = setInterval(function () {
if (count > 0) {
count = count - 1;
odiv.innerHTML = count;
}
else {
clearInterval(timtester);
}
}, 1000);
}
</script>
</head>
<body>
var mm = document.getElementById("mima").value;
</div>
</div>
</body>
</html>
实验4
运行效果：
效果实现：
通过调取系统时间，在时间边上显示自己的名字。底下用程序计时的月从0开始取值后+1，获取到当前的年月日，以1000毫秒为单位，对动态变化的时间进行计数。
代码：
<!DOCTYPE html>
<label for="yonghuming">用户名：</label><input id="yonghuming" type="text" name="username"><br>
<label for="mima">密码：</label><input id="mima" type="password" name="password"><br>
bottom: 20px;
right: 20px;
}
#anniu span {
cursor: pointer;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
margin-right: 5px;
}
#anniu .on {
Web前端实验
题目：JavaScript基础
班级：
计G191
学号：
2019322027
姓名：
刘祎
指导教师：
温春水
2020年3月9日·北京
信息工程学院
实验
运行效果：
功能实现：
在js里加入循环循环，每执行完一次操作乘数+1，一次挨个输出。达到乘法表效果
代码:
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#dingshi {
width:150px;
height:100px;
color:green;
font-size: 50px;
text-align:center;
line-height:50px;
var buttons=document.getElementById('anniu').getElementsByTagName('span');
var index=1;
function showbutton(){
for(var i=0; i<buttons.length; i++){
if(buttons[i].className=='on'){
var time = new Date(); // 程序计时的月从0开始取值后+1
var m = time.getMonth() + 1;
var ti = time.getFullYear() + "年" + m + "月"
+ time.getDate() + "日" + " " + time.getHours() + ":"
list.style.left=list.offsetLeft-600*(myindex-index)+'px';//
index=myindex;
showbutton()
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="tupian" style="left: -600px;">
<label for="qrmima">确认密码：</label><input id="qrmima" type="password" name="conpassword"><br>
<input type="submit" name="button" value="立即注册" onclick="return Check()" >
background: red;
}
</style>
<script type="text/javascript">
window.onload=function (){
var container=document.getElementById('box');
var list=document.getElementById('tupian');
}
}
</script>
</head>
<body>
</body>
</html>
实验2
运行效果：
功能实现：
加入了判断语句，对用户名和密码进行判断，根据用户名长度和密码一致性弹出不同窗口
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<img src="1.jpg" alt="5"/>
</div>
<div id="anniu">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
<style type="text/css">
#box{
margin-left: 15ห้องสมุดไป่ตู้px;
font-size:30px;
float: left;
}
h5{
margin-left: 550px;
<div id="dingshi"></div>
</body>
</html>
实验心得：
在此次实验过程中，充分用到了js的代码，，发现自己还有很多不足，对函数创建的掌握程度还不是很牢固。基础还不是很扎实，希望可以继续学习，掌握基础知识。多练习js的代码，函数的应用。
c.innerHTML=a;
a++;
}, 1000)
</script>
</body>
</html>
实验五
运行效果：
效果实现：
界面倒计时60秒后停止，建立函数获取倒计时的id，并设置总数为60，以1000毫秒为单位，当数字大于0时就－1，直到倒计时结束停止计时。
代码：
<!DOCTYPE html>
<html>
</form>
实验3
运行效果：
功能实现：
实现轮播图展示，对小圆点设置点击效果，对每个照片设置id，点对应的小圆点跳转到对应的id图片上。其余图片用hidden进行隐藏，达到转换效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播</title>
timer = setInterval(function () {
if (count > 0) {
count = count - 1;
odiv.innerHTML = count;
}
else {
clearInterval(timtester);
}
}, 1000);
}
</script>
</head>
<body>
var mm = document.getElementById("mima").value;
