diff --git a/index.html b/index.html index d9c91a7..7f7f5cc 100644 --- a/index.html +++ b/index.html @@ -176,7 +176,7 @@ - + diff --git a/js/inputs-config.js b/js/config.js similarity index 50% rename from js/inputs-config.js rename to js/config.js index d94da14..e65b5e7 100644 --- a/js/inputs-config.js +++ b/js/config.js @@ -1,5 +1,13 @@ -// 输入框初始化配置 - 独立于主逻辑的配置文件 -// 如需调整初始化位置或样式,请修改此文件 +// ============================================ +// 邀请函制作工具 - 全局配置文件 +// 修改以下数值即可调整外观,无需改动代码 +// ============================================ + +// -------- 默认背景图 -------- +// 修改为你的图片路径即可替换默认背景 +var DEFAULT_BG_IMAGE = './images/default-bg.jpg'; + +// -------- 三个预设输入框的初始位置与样式 -------- var INPUTS_CONFIG = { "inputs": [ { @@ -22,7 +30,7 @@ var INPUTS_CONFIG = { "id": "input3", "label": "编号", "left": 100, - "top": 306.4, + "top": 308.1, "fontWeight": 700, "placeholder": "请输入" } diff --git a/js/script.js b/js/script.js index b347203..4697eee 100644 --- a/js/script.js +++ b/js/script.js @@ -804,9 +804,9 @@ } } - // 加载默认背景图 + // 加载默认背景图(路径从 config.js 读取) function loadDefaultBackground() { - const defaultBgUrl = './images/default-bg.jpg'; + const defaultBgUrl = typeof DEFAULT_BG_IMAGE !== 'undefined' ? DEFAULT_BG_IMAGE : './images/default-bg.jpg'; const img = new Image(); img.onload = () => { currentImage = img; diff --git a/使用说明.md b/使用说明.md new file mode 100644 index 0000000..d78b158 --- /dev/null +++ b/使用说明.md @@ -0,0 +1,152 @@ +# 邀请函制作工具 - 使用与配置说明 + +> 以下操作,只需要用记事本打开文件、修改几个数字即可。 + +--- + +## 一、调整三个输入框的位置 + +### 适用场景 + +打开页面后,输入框(企业、嘉宾、编号)的位置不满意,想上下左右调一调。 + +### 操作步骤 + +1. 用 **记事本** 打开 `js/config.js` 文件 + +2. 找到下半部分的 `INPUTS_CONFIG` 配置段: + +```js +var INPUTS_CONFIG = { + "inputs": [ + { + "id": "input1", // ← 第一个输入框(企业) + "left": 100, // ← 距离左边多少像素 + "top": 218.4 // ← 距离顶部多少像素 + }, + { + "id": "input2", // ← 第二个输入框(嘉宾) + "left": 100, + "top": 261.4 + }, + { + "id": "input3", // ← 第三个输入框(编号) + "left": 100, + "top": 308.1 + } + ] +}; +``` + +3. **修改数字即可**: + + - **`left`**:数字越大,输入框越靠右;数字越小,越靠左 + - **`top`**:数字越大,输入框越靠下;数字越小,越靠上 + + > 小技巧:在页面上选中输入框,会显示它的坐标,复制数字填进来即可。 + +4. **保存文件**,然后刷新页面,效果就会生效。 + +--- + +## 二、更换默认背景图片 + +### 适用场景 + +打开页面时自动显示的那张背景图想换成自己的图片。 + +### 操作步骤 + +**方法一(推荐)—— 替换图片文件:** + +1. 准备一张你想要的图片(建议用 JPG 格式) +2. 把图片放到 `images` 文件夹里,重命名为 `default-bg.jpg` + > 如果原来有一张,会提示"替换文件",点击确定即可。 +3. 刷新页面,新背景图就会自动加载 + +**方法二—— 修改配置文件路径:** + +1. 把你的图片放到 `images` 文件夹,比如命名为 `my-bg.png` +2. 用记事本打开 `js/config.js` +3. 找到文件开头的这一行: + +```js +var DEFAULT_BG_IMAGE = './images/default-bg.jpg'; +``` + +4. 改成你的图片路径: + +```js +var DEFAULT_BG_IMAGE = './images/my-bg.png'; +``` + +5. 保存文件,刷新页面 + +--- + +## 三、修改输入框的文字粗细 + +### 适用场景 + +想让输入框的文字更粗或更细。 + +### 操作步骤 + +1. 用记事本打开 `js/config.js` + +2. 找到 `"fontWeight": 700` 这一行 + +3. 修改数字(范围 400 ~ 900): + +| 数值 | 效果 | +|------|------| +| 400 | 正常粗细 | +| 500 | 中等 | +| 600 | 半粗 | +| **700** | **加粗(默认)** | +| 800 | 更粗 | +| 900 | 最粗 | + +4. 保存文件,刷新页面 + +--- + +## 四、修改输入框的占位提示文字 + +### 适用场景 + +想把"请输入"改成其他提示语。 + +### 操作步骤 + +1. 用记事本打开 `js/config.js` + +2. 找到相应的 `"placeholder"` 行,例如: + +```js +"placeholder": "请输入" +``` + +3. 改成你想要的文字,比如: + +```js +"placeholder": "在此输入企业名称" +``` + +4. 保存文件,刷新页面 + +--- + +## 常见问题 + +**Q:修改文件后页面没变化?** +A:先确认文件已保存,然后刷新浏览器页面(按 F5 或点浏览器的刷新按钮)。 + +**Q:改坏了怎么办?** +A:可以重新下载项目,或者联系开发者恢复。 + +**Q:找不到 `images` 文件夹?** +A:项目文件夹里如果没看到,自己新建一个名叫 `images` 的文件夹即可。 + +**Q:`config.js` 在哪里?** +A:在 `js` 文件夹里,打开后一眼就能看到全部配置项。