神武手游宠物打书模拟器_神武打书模拟器-优快云博客

本文链接：https://blog.youkuaiyun.com/Guan_Java/article/details/116904398

这篇博客介绍了一个使用HTML和Javascript实现的宠物技能模拟器。通过Bootstrap框架和JavaScript动态生成技能卡片，用户可以模拟学习和遗忘技能的过程，展示了前端开发中动态交互功能的实现。

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

实现方式

HTML + Javascript

实现效果

在这里插入图片描述

实现过程

准备图片文件和bootstrap

png 文件夹 - >
编写代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>打书模拟器</title>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="bootstrap/jquery-1.9.1.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
	<style type="text/css">

		body{
    
			margin: 0 auto;
			padding: 0;
			width: 1000px;
			height: 100%;
			background: url("png/background.png") no-repeat;
			background-size: 100%;
		}

		#window
		{
    
			width: 100%;
			height: 800px;
			
		}

		#pets_info
		{
    
			
			margin-top: 2px;
			margin-left: 1px;
			width: 450px;
			height: 400px;
		}

		#pets_books
		{
    
			margin-left: 1px;
			
			width: 450px;
			height: 360px;
			background: #A2D5FD;
		}

		#Squares
		{
    
			text-align: center;
		}

		#Squares div
		{
    
			display: inline-block;
			border: 3px solid #6196DA;
			border-radius: 8px;
			width: 90px;
			height: 90px;
			margin-right:8px;
			margin-top: 1px;
			background: #4C76AD;
			overflow: hidden;
		}

		#Books
		{
    
			width: 550px;
			position: absolute;
			float: left;
			height: 760px;
			
			left: 710px;
			top: 2px;
			background: #A2D5FD;
			overflow-y:auto;
		}

		#Books div[name='pic']
		{
    
			display: inline-block;
			
			width: 90px;
			height: 110px;
			margin-left:35px;
			margin-top: 20px;
			text-align: center;
			overflow: hidden;

		}
		#Books div[name='pic'] img
		{
    
			border