首页用HTML5，js设计一个网页，实现：点击打印按钮，打印出一个已经填写好的列表表单

用HTML5，js设计一个网页，实现：点击打印按钮，打印出一个已经填写好的列表表单

时间: 2024-10-07 18:05:11 浏览: 32

要在HTML5和JavaScript中创建一个网页，实现点击打印按钮打印预填好的列表表单，你可以按照以下步骤进行：首先，你需要在HTML中设置基础结构，包括一个包含列表项的`<ul>`元素，以及一个用于触发打印的`<button>`标签： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>打印预填表单</title> </head> <body> <h1>预填列表表单</h1> <ul id="filledList">  </ul> <button onclick="printList()">打印预填表单</button> <script src="script.js"></script> </body> </html> ``` 接下来，在`script.js`文件中编写JavaScript代码来生成预填数据并添加到列表中，然后处理打印功能： ```javascript // JavaScript (script.js) document.addEventListener('DOMContentLoaded', function () { const listItems = [ { text: '项目一', value: 'item1' }, { text: '项目二', value: 'item2' }, { text: '项目三', value: 'item3' } ]; // 动态添加表单项 listItems.forEach(function(item) { const li = document.createElement('li'); li.textContent = item.text; document.getElementById('filledList').appendChild(li); }); // 打印函数 function printList() { window.print(); } }); ``` 在这个示例中，当页面加载完成时，我们预先创建了一些列表项，并将它们添加到`#filledList`中。点击“打印预填表单”按钮时，会触发浏览器的默认打印功能，直接将整个列表内容打印出来。

阅读全文