HTML5+CSS3期末考试⼤题1.制作⼀个⽂件上传效果
code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>file</title>
<style>
.content{
width: 520px;
margin: 20px auto;
}
.progress{
width: 200px;
height: 30px;
position: relative;
background: #f5f5f5;
}
.bar{
height: 100%;
width: 0px;
background: #f00;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="content">
<input type="file" id="file" name="file">
<div class="progress">
<div class="bar" id="bar">
</div>
</div>
<div id="info">
0%
</div>
<input type="submit" id="btn">
<script>
var oFile = ElementById('file');
var oBar = ElementById('bar');
var oInfo = ElementById('info');
var oBtn = ElementById('btn');
var fs = oFile.files[0]
var reader = new FileReader(fs)
// 上传中
// 计算上传的⽐率
oBar.style.width = e.al * 200+'px'
oInfo.innerHTML = und((e.al * 200) * 0.5) +'%'                }
// 上传完成
console.log('完成了！')
}
// 读取⽂件格式
}
</script>
</div>
</body>
</html>
2.利⽤HTML5中的canvas制作以下效果
code：
<!DOCTYPE html>
<htmls>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
meta大裁员
<style>
</style>
<body>
<div id="canvas-warp">
<canvas id="canvas" >
1
</canvas>
</div>
<script>
var canvas = ElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = Context("2d");
context.beginPath();
context.arc(100, 70, 50, 0.5 * Math.PI, 1 * Math.PI);
context.strokeStyle = "green";
context.fillStyle = "white";
context.fill();
context.stroke();
context.beginPath();
context.arc(100, 70, 50, 1 * Math.PI, 1.5 * Math.PI);
context.strokeStyle = "dimgray";
context.fillStyle = "white";
context.fill();
context.stroke();
context.beginPath();
context.arc(100, 70, 50, 1.5 * Math.PI, 2 * Math.PI);
context.strokeStyle = "red";
context.fillStyle = "white";
context.fill();
context.stroke();
context.beginPath();
context.arc(100, 70, 50, 2 * Math.PI, 0.5 * Math.PI);
context.strokeStyle = "blue";
context.fillStyle = "white";
context.fill();
context.stroke();
}
</script>
</body>
</html>
3.利⽤CSS3中 @ key-frames制作以下效果，实现红⾊div在距离顶部200px处停下来图⼀
图⼆
code：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。