无编程经验的编程参考三：与用户互动或利用时间

Peter

再一次，兄弟姐妹们，让我们深入神秘的世界……编程。

或者换句话说，让你的登陆页更有效。

在这，最后一部分(现在)联盟营销编程基本介绍，我们将看看让你的登陆页面基于你的访客行为而改变得方法。

我们将介绍如何根据他们点击的地方改变页面的部分；看看你的外包程序员是如何在你已经拥有的登陆器上做到这一点的(这样你就可以很容易地更改他们);看看基于时间的变化;甚至涉及动画！

让我们开始吧！

本教程需要准备什么

我们不会使用来自这两个部分的代码，但我们将使用其中的概念。如果你在这里卡住了，很有可能浏览一下之前的部分会让你摆脱困境。

除此之外，你不需要了解任何Javascript，只需要了解HTML和CSS。

你可以很容易地将我在这里向你展示的技术应用到你现有的着陆页上，这可能是最好的学习方法。然而，如果你想要一个样本着陆页进行实验，以下是一个你学习时候可以用的简单测试页面：

和之前的教程不一样，本篇文章不涉及任何追踪程序设置。

和用户互动：点击

我们对用户输入做出反应的最简单的方式是当他们点击我们的着陆页中的东西时采取一定的行动。

这在联盟营销的经典应用是“规则筛选型的登陆页”——用户必须点击通过一系列承诺，他或她才被“允许”访问任务页面，这种互动真的很有效。

那我们要怎么做呢?其实很简单。当用户点击时，我们所作的就是用原本隐藏的 HTML 替换现有的 HTML 内容。我们只需简单地将div上的CSS从display:none更改为display:block。

为了实现这一点，我们首先必须找到想要更改的div，然后更改它的.style属性，就像在本系列的前面部分中更改它的innerHTML属性一样。

首先添加一个脚本块(参见教程的第1部分- "#script type="text/javascript"></script#")，在其中添加以下两行：

花点时间看看每一行，确保你理解了它们的作用！这里唯一的新内容是，与“innerHTML”不同，“style”有针对每个可能的CSS样式的子属性——color、width、background-color，等等。我们可以用Javascript来改变它们，就像我们在这里做的一样——风格。颜色、风格。宽度等。如果你对这些内容感到困惑，请提问，我可以一步解释！或者在群里交流。

尝试运行该着陆页。看起来它没有起作用——当然没有任何变化。但是如果你仔细看，你会看到“question”(根据HTML，它应该是可见的)是隐藏的，而“answer”(在HTML中被设置为隐藏的)是可见的。Javascript可以工作，但只要页面加载它就可以工作。我们需要将它设置为在用户点击时触发。

为此，我们首先需要创建自己的函数。在第1部分中，我们已经讨论过函数，但是现在我们要创建一个自己的函数。这其实很简单。

要创建一个函数，首先输入"function"。然后你给它起一个名字——在这个例子中，“showhide”。然后为函数添加参数——在本例中，函数不接受任何参数，因此只需添加两个括号)。

最后，将函数要运行的代码用花括号括起来，就像第2部分中的IF语句:{这里是代码}。

以下是它们是如何组合在一起的：

把它加到你的着陆页上，取代我们上面加的两行。

我们为什么要这样做?现在，每当我们想要运行这段代码时，我们只需在Javascript中输入“showhide()”。那样快多了!

此外，除非我们在代码中输入“showhide()”，否则代码不会运行。现在再试着运行你的着陆页-你会看到问题是可见的，而答案是不可见的。如果你加入

“showhide();”

在底部#/script#前，你将看到代码的功能与之前一样——换句话说，Javascript起作用了。一旦你测试结束，就删除它。

当我们将其与HTML的“onclick”属性结合在一起时，函数的简便性特别有用，这就是在这里发生的神奇之处。

任何HTML标签——a、p、div、img，等等——都可以添加一个“onclick”元素，就像一个样式，一个类或一个ID。当元素被点击时，“onclick”中的任何内容都将作为Javascript执行。

在本例中，只需将开始按钮标签更改为：

现在点击按钮——你会看到它神奇地改变!

这个功能开启了各种可能性：

• 你可以建立一个问卷登陆页——见下面。

• 你可以弹出额外的信息，而不强迫用户重新加载页面——非常适合条款和条件。

• 你可以内置元素来循环浏览图像——例如，在约会着陆页上的左右按钮来循环浏览图像。

• 如果你建了一个计数器，你可以让人们看一些图片，然后告诉他们注册看更多!

• 一般来说，你可以鼓励用户与你的页面进行交互，让他们点击很多东西。这能够吸引用户“玩耍”模式，并被证明能够提高游戏的整体粘性。

使用它建立一个多问题着陆页

加入社区,可阅读全站10w+资源

您尚未登录，请登录后操作

 非会员试读19%,加入社区后可阅读全文