简体   繁体   English

Javascript时钟功能未在Rails应用程序上运行

[英]Javascript clock function not running on Rails app

First real time I've tried to use Javascript in a Rails app, but nothing outside of alerts seem to be working for me. 第一次实时,我尝试在Rails应用程序中使用Javascript,但是警报之外的所有内容似乎对我来说都没有用。

What I'm trying to do is get this simple clock to run on my Rails app, pretty much copying the code where I thought it was supposed to go, but nothing's working and all my searches are either too specific or don't seem to work. 我想做的就是让这个简单的时钟在我的Rails应用程序上运行,几乎将代码复制到我认为应该去的地方,但是没有任何作用,我所有的搜索要么太具体,要么似乎不工作。

I want the clock to be available sitewide but I've also tried organizing it onto specific controllers and their views with the same amount of luck. 我希望时钟在整个站点范围内都可用,但我也尝试将其组织到特定的控制器及其观点上,但运气还不错。

application.js application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree ./sitewide

apps/assets/javascripts/sitewide/pages.js apps / assets / javascripts / sitewide / pages.js

function startTime() {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML = h+":"+m+":"+s;
    var t = setTimeout(function(){startTime()},500);
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

application.html.erb application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Clawk</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>


</head>
<body>


<%= render 'shared/navbar' %>

<div class="container-fluid">

<%= render 'shared/sidebar' %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div id="txt"></div>
<%= yield %>
</div>
</div>

</body>
</html>

You have the JavaScript in place, but you are not actually calling the startTime() function. 您已经安装了JavaScript,但是实际上并没有在调用startTime()函数。 Note in the example it is called via an onload attribute on body : <body onload="startTime()"> 请注意,在示例中,它是通过bodyonload属性onload<body onload="startTime()">

With Rails, you could add this to the end of your pages.js file: 使用Rails,您可以将其添加到pages.js文件的末尾:

$(document).on('page:load', function() {
  startTime();
});

This will execute the code within the function on page load (and will be compatible with turbolinks). 这将在页面加载时在函数内执行代码(并将与Turbolink兼容)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM