Question

我有以下需要构建的规范，但我不知道从哪里开始。

以下是规范：

创建一个HTML + javascript页面，可以在任何浏览器中打开（桌面只是我期望的）
页面应该有一个定时器控件，允许用户设置一些超时，比如10分钟（或2天！）。
当计时器触发时，页面会从您选择的网页中提取一些内容并显示它（不要重定向或打开随机网页。获取内容并将其显示在当前页面上，甚至是消息框/警报（）很好）。选择网络上的任何页面/内容。例如，获取google.com的着陆页并在警告框中显示其html代码。
应该有一个开/关滑块式按钮，用于启用/禁用定时器控件。如果计时器正在滴答并且用户关闭按钮，则应禁用计时器。当用户打开按钮时，计时器继续从停止的位置开始倒计时。（提示：从网上下载并使用一些javascript按钮控制/定时器控件。不要使用标准按钮。我希望你使用自定义控件。不应该太难使用其中一个自定义控件）。
使用网络上提供的通用图片。在线搜索是可以的，但不要复制这样或类似的现有项目。

Answer 1

我同意上述评论。我的答案是聘请自己的网络开发人员。您可以在这里放置广告，或通过诸如elance之类的服务雇用某人。以上对于前端开发人员来说是一项简单的工作，但不幸的是，这些论坛是针对形成知识库的问题/答案，而不是将需求转化为源代码的方法。

话虽如此，这是如何实现上述目标的：

1）任何浏览器都是一个复杂的存在，当你说在任何浏览器中打开时＃＆你是指最常用的前5个浏览器，还是每个浏览器。每个浏览器都包含text＆amp;语音浏览器和在任何机器上运行的浏览器，包括原始IE和netscape等浏览器。

这会改变您的代码，因为旧的浏览器不会对html5代码做出反应，而常见的前5个代码将会对此做出反应。如果您要求前端开发人员为您构建一个站点，他们可能会在html5中构建它。

由于HTML在第一个商业浏览器出现之前，html通常得到很好的支持，css是一个不同的野兽，但你还没有问过这个问题。 Javascript往往在浏览器中得到很好的支持，但是旧的浏览器版本在响应方式（函数的某些不同名称）方面略有不同，并且在大多数常用浏览器中都可以禁用javascript。

为了克服后一点，如果没有找到javascript，你可以使用在屏幕上显示消息的标签。

html5中的hello world html页面如下所示：

<!doctype>
  <html>
    <head></head>
    <body>
      <h1>Welcome to my HTML5 page</h1> 
      <p>This is a 'hello world' example</p>
   </body>
</html>

2）要创建超时，它非常简单，在你的脚本中，只需写下：

<script type="text/javascript">
    window.setTimeout(function(){alert('I have been triggered');},1000);
</script>

详情请见http://www.w3schools.com/jsref/met_win_settimeout.asp

现在setTimeout的格式很简单（函数，超时时间）。超时时间以毫秒为单位，因此在示例中，它将在1秒后触发。 10分钟，它需要600000（600k ms），2天将是172800000（172.8m ms）。请注意，只有在页面上打开窗口时才会触发超时。

3）从另一个页面获取代码很简单，有多个选项：

您可以使用html5方法导入它： http://www.html5rocks.com/en/tutorials/webcomponents/imports/

将其破解为您的功能，您可以这样做：

function(){
   // assume I have been triggered by the timeout
   var link = document.createElement('link');
   link.rel = 'import'; 
   link.href = 'http://www.google.com'
   link.onload = function(e) {...};
   link.onerror = function(e) {...};
   document.head.appendChild(link);
}

或者您可以使用jquery（您需要jquery库来执行此操作）：https://jquery.com/

你可以有一些javascript

$(function(){
      window.setTimeout(function(){
         $("#publishedContent").load("http://www.google.com"); 
      },1000);
    });

你需要在页面上匹配一个匹配的html元素，如下所示：

<div id='publishedContent'></div>

还有其他一些方法可以做到这一点，但您需要与开发人员讨论这些方法。

4）对于自定义控件，您最好查看各种jquery插件/主题（http://jqueryui.com/themeroller/）。如果您搜索jquery UI主题，或者查看Twitter引导程序（http://getbootstrap.com/getting-started/#examples），您应该从可实现的内容中获得灵感。有很多例子：http://olance.github.io/jQuery-switchButton/

5）要获取图像，确保您具有复制写入的最安全的赌注是使用getty图像（http://www.gettyimages.co.uk/）或Shutterstock（http://www.shutterstock.com）等服务并购买图像。它们很便宜。

需要设计具有以下规范的HTML页面

1 个答案: