JavaScript实战之简单的抽签器

最新推荐文章于 2025-03-02 15:56:31 发布

zyftest1

最新推荐文章于 2025-03-02 15:56:31 发布

阅读量1.6k

点赞数

分类专栏： WEB前端文章标签：抽签器 JavaScript HTML css

本文链接：https://blog.youkuaiyun.com/qq_40084390/article/details/90290722

版权

本文介绍了如何使用JavaScript创建一个简单的抽签器。通过展示实现画面和代码，讲解了JavaScript、HTML及CSS在构建抽签功能中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.实现画面

在这里插入图片描述

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#photo {
				position: relative;
				margin: 0 auto;
				width: 1600px;
				height: 800px;
				background-color: #D3D3D3;
			}

			.imgdiv {
				float: left;
				position: absolute;
				margin-top: 30px;
				margin-left: 30px;

			}


			img {
				width: 500px;
				height: 668px;
				background-color: #E0FFFF;
			}

			input {
				position: relative;
				bottom: -40px;
				margin: 0 auto;
				left: 40%;
				width: 200px;
				height: 50px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var beginBtn = document.getElementById("beginBtn");
				var endBtn = d