改变HTML中LED的颜色。

huangapple
go评论120阅读模式
英文:

Change the color of a led on html

问题

这是您要翻译的部分：

style.css

  1. .led-green {
  2.   position: relative;
  3.   right: -50%;
  4.   top: 10%;
  5.   margin: 0 auto;
  6.   width: 24px;
  7.   height: 24px;
  8.   background-color: #ABFF00;
  9. }
  11. .led-red {
  12.   position: relative;
  13.   right: -50%;
  14.   top: 10%;
  15.   margin: 0 auto;
  16.   width: 24px;
  17.   height: 24px;
  18.   background-color: rgb(255, 0, 0);
  19. }

app.js

  1. /** 检查互联网连接是否可用 */
  2. var internetConnection = "";
  3. require('dns').resolve('www.google.com', function(err) {
  4.   if (err) {
  5.     console.log("没有互联网连接");
  6.     internetConnection = "led-red";
  7.   } else {
  8.     console.log("已连接到互联网");
  9.     internetConnection = "led-green";
  10.   }
  12.   console.log(internetConnection);
  13. });

index.ejs

  1. <div class="<%=internetConnection%>"></div>

Update

  1. res.render('index', {
  2.   // ...
  3.   internetConnection: internetConnection,
  4.   // ...
  5. });

UPDATE

问题不在于渲染。问题是当我将div定义如下时，HTML页面不起作用：

  1. <div class="<=%internetconnection%>"></div>

有没有任何解决方法？再次感谢任何提示！

英文:

I'm to change the color of led based on whether of internet connection is there or not.
here's what I have done so far:

style.css

  1. .led-green {
  2.   position: relative;
  3.   right: -50% ;
  4.   top: 10%;
  5.   margin: 0 auto;
  6.   width: 24px;
  7.   height: 24px;
  8.   background-color: #ABFF00;
  10. }
  11. .led-red {
  12.   position: relative;
  13.   right: -50% ;
  14.   top: 10%;
  15.   margin: 0 auto;
  16.   width: 24px;
  17.   height: 24px;
  18.   background-color: rgb(255, 0, 0);
  20. }

app.js

  1.  /** Check if internet connection is avaiable */
  2.   var  internetConnection =&quot;&quot;
  3.   require(&#39;dns&#39;).resolve(&#39;www.google.com&#39;, function(err) {
  4.     if (err) {
  5.        console.log(&quot;No internet connection&quot;);
  6.        internetConnection =&quot;led-red&quot;;
  7.     } else {
  8.        console.log(&quot;Connected to internet &quot;);
  9.        internetConnection =&quot;led-green&quot;;
  11.     }
  13.     console.log(internetConnection)
  14.   });

I guess this is the part where I got the problem

index.ejs

  1.   &lt;div class=&quot;&lt;%=internetConnection%&gt;&quot;&gt; &lt;/div&gt;

my hope was that by starting the app the division would be set like :

  1. &lt;div class =&quot;led-green&quot;&gt; &lt;/div&gt;

or

  1. &lt;div class =&quot;led-red&quot;&gt; &lt;/div&gt;

any idea how may I solve this?

thanks in advance !

Update

I'm the variable in the render function as follows :

  1. .......................
  2.  res.render(&#39;index&#39;, {
  3. .....
  4. internetConnection:internetConnection,
  5. ...............
  6. }

UPDATE

the problem isn't the rendering. the issue is that the html page doens't work when I define div as followed :

<div class="<=%internetconnection>"> <div>

any idea how to solve this ?
thanks again for any hint !

答案1

得分: 2

可能你的响应在你的应用程序决定互联网连接是否可用之前就被呈现了吗？看起来像是你面临的问题，因为Node.js是异步的。

尝试将你用于向客户端发送响应的代码放在dns.resolve()回调中，像这样：

  1. var internetConnection = "";
  2. require('dns').resolve('www.google.com', function(err) {
  3.   if (err) {
  4.      console.log("没有互联网连接");
  5.      internetConnection = "led-red";
  6.      ejs.render(errorHTMLString, data, options);
  7.   } else {
  8.      console.log("已连接到互联网");
  9.      internetConnection = "led-green";
  10.      ejs.render(noErrorHTMLString, data, options);
  11.   }
  12. });

希望这有所帮助。

英文:

Is it possible that your response is rendered before your app decides whether internet connection is available or not? Seems to me like a problem you are facing because nodejs is asynchronous.

try to put the code you are using to send response to the client in dns.resolve() callback, like:

  1.  var  internetConnection =&quot;&quot;
  2.   require(&#39;dns&#39;).resolve(&#39;www.google.com&#39;, function(err) {
  3.     if (err) {
  4.        console.log(&quot;No internet connection&quot;);
  5.        internetConnection =&quot;led-red&quot;;
  6.        ejs.render(errorHTMLString, data, options);
  7.     } else {
  8.        console.log(&quot;Connected to internet &quot;);
  9.        internetConnection =&quot;led-green&quot;;
  10.        ejs.render(noErrorHTMLString, data, options);
  11.     }
  13.     
  14.   });

Hope this helps.

答案2

得分: 1

请确保在resolve()的回调函数内调用render()函数：

  1.   var internetConnection = "";
  2.   require('dns').resolve('www.google.com', function(err) {
  3.     if (err) {
  4.        console.log("没有互联网连接");
  5.        internetConnection = "led-red";
  6.     } else {
  7.        console.log("已连接到互联网");
  8.        internetConnection = "led-green";
  9.     }
  11.     console.log(internetConnection);
  12.     res.render('index', {
  13.       internetConnection: internetConnection,
  14.     });
  15.   });
英文:

Please make sure that you call the render() function within the callback of resolve():

  1.   var  internetConnection =&quot;&quot;
  2.   require(&#39;dns&#39;).resolve(&#39;www.google.com&#39;, function(err) {
  3.     if (err) {
  4.        console.log(&quot;No internet connection&quot;);
  5.        internetConnection =&quot;led-red&quot;;
  6.     } else {
  7.        console.log(&quot;Connected to internet &quot;);
  8.        internetConnection =&quot;led-green&quot;;
  10.     }
  12.     console.log(internetConnection);
  13.     res.render(&#39;index&#39;, {
  14.       internetConnection:internetConnection,
  15.     }
  16.   });
  17.

huangapple
  • 本文由 发表于 2020年1月6日 16:37:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/59608931.html
  • css
  • ejs
  • html
  • node.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定