tailwindcss+js实现小学生数学运算试卷生成器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：tailwindcss+js实现小学生数学运算试卷生成器代码，可选择题目数量，并导出pdf文档。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数学题试卷生成器 - 1-6年级</title>
  <!-- 引入Tailwind CSS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- 引入Font Awesome图标 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- 引入jsPDF用于PDF生成 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jspdf.umd.min.js"></script>
  <!-- 引入html2canvas -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html2canvas.1.4.1.js"></script>
  
  <script>
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  </script>

  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            neutral: {
              100: '#F2F3F5', 200: '#E5E6EB', 300: '#C9CDD4', 400: '#86909C',
              500: '#4E5969', 600: '#1D2129', 700: '#2a2f3b', 800: '#1d2129', 900: '#121417'
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .shadow-custom { @apply shadow-lg shadow-neutral-200/50 dark:shadow-none; }
      .transition-custom { transition: all 0.3s ease-in-out; }
      .input-focus { @apply focus:ring-2 focus:ring-primary/50 focus:border-primary; }
    }
    .dark input[type="range"]::-webkit-slider-thumb { background: #165DFF; }
    .dark input[type="range"]::-moz-range-thumb { background: #165DFF; }
  </style>

  <!-- ================================================================== -->
  <!-- FIX: 1. 添加PDF导出专用样式 -->
  <!-- 这部分样式默认不生效，只有在导出时通过JS为paper-container的克隆体添加 is-exporting 类后才会激活 -->
  <!-- ================================================================== -->
  <style>
    .is-exporting {
      /* 强制白底黑字，移除所有背景和阴影 */
      background: #ffffff !important;
      color: #000000 !important;
      box-shadow: none !important;
      border: 1px solid #dddddd; /* 给PDF内容一个简单的边框 */
    }
    .is-exporting * {
      /* 强制所有子元素都为黑字，移除不必要的颜色 */
      color: #000000 !important;
      border-color: #000000 !important;
      background-color: transparent !important;
    }
    .is-exporting .pdf-hide {
      /* 隐藏标记为 pdf-hide 的元素 */
      display: none !important;
    }
    .is-exporting input {
      /* 将输入框变成下划线，用于手写 */
      border: none !important;
      border-bottom: 1px solid #000000 !important;
      border-radius: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .is-exporting .answer-line {
      /* 题目的答案区域，显示为下划线 */
      display: inline-block;
      width: 120px; /* 答案线的长度 */
      border-bottom: 1px solid #000000;
      vertical-align: bottom; /* 与等号对齐 */
    }
  </style>
</head>
<body class="font-inter bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-300 min-h-screen flex flex-col transition-colors duration-300">
  
  <!-- 头部导航 (无变化) -->
  <header class="bg-white dark:bg-neutral-800 shadow-custom sticky top-0 z-50 dark:border-b dark:border-neutral-700">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-graduation-cap text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold text-neutral-600 dark:text-neutral-200">数学题试卷生成器</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-custom">
          <i class="fa text-neutral-500 dark:text-neutral-400"></i>
        </button>
        <button id="help-btn" class="p-2 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-custom">
          <i class="fa fa-question-circle text-neutral-500 dark:text-neutral-400"></i>
        </button>
      </div>
    </div>
  </header>

  &.........完整代码请登录后点击上方下载按钮下载查看