Challenge 1: Output the Date and Time

我们来一步步解决这个挑战。首先，我们需要创建一个名为`challenge_currentDate`的Lightning组件，这个组件会在页面加载时显示当前的日期和时间。然后，我们还要添加一个按钮，点击这个按钮可以手动更新日期和时间。最后，我们希望这个日期和时间能够每秒自动更新一次。 ### 第一步：创建Lightning组件 1. 打开你的Salesforce开发环境，进入开发者控制台。 2. 点击“文件” -> “新建” -> “Lightning组件”。 3. 给组件命名为`challenge_currentDate`，然后点击“提交”。 ### 第二步：编写组件的HTML 在组件的HTML文件中，我们需要显示当前的日期和时间，并且添加一个按钮来手动更新它们。 ```html

{!v.currentDateTime}

``` ### 第三步：编写JavaScript控制器 接下来，我们需要编写JavaScript控制器来处理按钮点击和自动更新日期和时间的逻辑。 ```javascript ({ doInit: function(component, event, helper) { helper.updateDateTime(component); setInterval(function() { helper.updateDateTime(component); }, 1000); }, updateDateTime: function(component, event, helper) { helper.updateDateTime(component); } }) ``` ### 第四步：编写JavaScript助手 助手函数`updateDateTime`用于获取当前的日期和时间，并更新组件的属性。 ```javascript ({ updateDateTime: function(component) { var today = new Date(); var dateTime = today.toLocaleString(); component.set("v.currentDateTime", dateTime); } }) ``` ### 第五步：在Lightning App Builder中使用组件 1. 打开Lightning App Builder。 2. 创建一个新的页面，命名为“Challenge Gallery”。 3. 在页面布局中，找到并拖动`challenge_currentDate`组件到页面上。 4. 保存并激活页面。 ### 总结 现在，当你加载“Challenge Gallery”页面时，你会看到当前的日期和时间显示在页面上。点击按钮可以手动更新日期和时间，而且日期和时间会每秒自动更新一次。 希望这个解释对你有帮助！如果有任何问题，随时问我。