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

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

代码语言：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 * {
      /* 强制所有子元素.........完整代码请登录后点击上方下载按钮下载查看