首页设计一个弹窗页面,有一个输入框,默认值为0,有一个按钮,每次点击输入框内的值加1,点击关闭重新打开后输入框值恢复默认

设计一个弹窗页面,有一个输入框,默认值为0,有一个按钮,每次点击输入框内的值加1,点击关闭重新打开后输入框值恢复默认

时间: 2023-08-08 11:07:34 浏览: 102

产品设计经验分享：6个输入框，47个设计点

“乍一看到某个问题，你会觉得很简单，其实你并没有理解其复杂性。当你把问题搞清楚之后，又会发现真的很复杂，于是你就拿出一套复杂的方案来。实际上，你的工作只做了一半，大多数人也都会到此为止……。但是真正伟大的人还会继续向前，直至找到问题的关键和深层次原因，然后再拿出一个优雅的、堪称完美的有效方案。”-史蒂夫·乔布斯这篇文字只是描述对于简单的三个界面，我做每个设计决策的历程。设计任务是对以下注册过程的优化，目标是降低注册门槛，让过程高效，平台为iOS。设计分两步走，分别是信息架构设计和细节设计，细节再从默认状态、填写状态、反馈状态三个角度进行设计。以下是过程描述：也就是整理信息、规划步骤，把需要用户

以下是一个简单的弹窗页面的示例代码： ``` <!DOCTYPE html> <html> <head> <title>弹窗页面</title> <style> .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 150px; background-color: #fff; border: 1px solid #ccc; padding: 20px; text-align: center; display: none; } </style> </head> <body> <button onclick="openPopup()">打开弹窗</button> <div class="popup" id="popup"> <input type="text" id="input" value="0"><br><br> <button onclick="addOne()">加1</button> <button onclick="reset()">关闭并重置</button> </div> <script> var popup = document.getElementById("popup"); var input = document.getElementById("input"); var value = 0; function openPopup() { // 显示弹窗 popup.style.display = "block"; } function addOne() { // 输入框内的值加1 value += 1; input.value = value; } function reset() { // 关闭弹窗并重置输入框的值为0 popup.style.display = "none"; input.value = 0; value = 0; } </script> </body> </html> ``` 这个示例代码中，通过CSS设置了一个弹窗的样式，包括位置、大小、背景颜色、边框等。在HTML中，有一个按钮用于打开弹窗，一个输入框和两个按钮用于操作输入框的值。在JavaScript中，通过获取DOM元素，实现了打开弹窗、增加输入框的值、关闭弹窗并重置输入框的值等功能。

阅读全文