ruling_timer/app/views/ruling_timers/_test.html.erb

<% if current_user %>
	<div class="timeman-container timeman-container-tc" id="timeman-container">
		<div class="timeman-wrap">
			<span id="timeman-block" class="timeman-block">
				<span class="bx-time" id="timeman-timer">
					<span class="current_time"><%=DateTime.now.new_offset('+08:00').strftime('%H:%M')%></span>
				</span>
				<span class="timeman-right-side" id="timeman-right">
					<span class="timeman-beginning-but" id="timeman-status-block">
						<i class="fa fa-stop-circle"></i>
						<span id="timeman-status" class="timeman-status">工作中</span>
					</span>
				</span>
			</span>
		</div>
	</div>
	<style>
		.timeman-container{
			float:  left;
			background: <%=current_site.orbit_bar_background_color%>;
			color: <%=current_site.orbit_bar_text_color%>;
			height: 100%;
		}
		.timeman-wrap{
			height: 100%;
		}
		.current_time{
			font-size: 1.3em;
		}
		.timeman-block {
		    cursor: pointer;
		    display: inline-block;
		    height: 100%;
		    text-align: left;
		    white-space: normal;
		    display: flex;
		}
		.timeman-right-side{
			display: inline-block;
			font-size: 0.9em;
			margin-left: 0.5em;
			vertical-align: middle;
			line-height: 2;
		}
		.timeman-beginning-but{
			vertical-align: middle;
		}
	</style>
	<script>
		$(document).ready(function(){
			var time_tracker = {};
			var is_chinese = ( I18n && I18n.locale.indexOf('zh') != -1 );
			time_tracker.datetime_format = is_chinese ? 'y M d h:m b' : 'd M, y h:m b';
			time_tracker.date_format = is_chinese ? 'y M d' : 'd M, y';
			time_tracker.time_format = "h:m b";
			time_tracker.date_time_str_format = 'y/MM/d H:m';
			time_tracker.short_day = (is_chinese ? "d (w)" : "w d")
			time_tracker.short_date = (is_chinese ? "M d (w)" : "w d, M")
			time_tracker.getDateString = function(date, format,is_chinese) {
			    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
			    var week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
			    if(is_chinese){
			    	months = [];
			    	for(var i=0;i<12;i++){
			    		months.push((i+1)+"月");
			    	}
			    	week_days = ["週日","週一","週二","週三","週四","週五","週六"]
			    }
			    var getPaddedComp = function(comp) {
			        return ((parseInt(comp) < 10) ? ('0' + comp) : comp)
			    },
			    formattedDate = format,
			    o = {
			        "y+": date.getFullYear() + (is_chinese ? "年" : ""), // year
			        "MM+": getPaddedComp(date.getMonth() + 1), //raw month
			        "M+": months[date.getMonth()], //month
			        "d+": (is_chinese ? (date.getDate() + "日")  : getPaddedComp(date.getDate())), //day
			        "w+": week_days[date.getDay()], //weekday
			        "h+": getPaddedComp((date.getHours() > 12) ? date.getHours() % 12 : date.getHours()), //hour
			        "H+": getPaddedComp(date.getHours()), //hour
			        "m+": getPaddedComp(date.getMinutes()), //minute
			        "s+": getPaddedComp(date.getSeconds()), //second
			        "S+": getPaddedComp(date.getMilliseconds()), //millisecond,
			        "b+": (date.getHours() >= 12) ? 'PM' : 'AM'
			    };

			    for (var k in o) {
			        if (new RegExp("(" + k + ")").test(format)) {
			            formattedDate = formattedDate.replace(RegExp.$1, o[k]);
			        }
			    }
			    return formattedDate;
			};
			var update_interval = 60 * 1000;
			var time_tracker_timeout_id;
			function update_time(){
				$(".current_time").html(time_tracker.getDateString(new Date,time_tracker.time_format))
				var update_interval = 60 * 1000;
				if(time_tracker_timeout_id)
					window.clearTimeout(time_tracker_timeout_id);
				time_tracker_timeout_id = window.setTimeout(update_time,update_interval)
			}
			update_time();
			$("#timeman-container").off("click").on("click",function(){
				$("#timeman_main").css("display","");
				if($("#timeman_main").hasClass("active_popup"))
					$("#timeman_main").removeClass("active_popup");
				else{
					$("#timeman_main").addClass("active_popup");
					$('#timeman_main .nav-pills').scrollingTabs('refresh');
				}
			})
			$(document).on("click",":not(.timeman-wrap,#timeman_main)",function(event){
				var target = $(event.target);
				if(target.is(":not(.timeman-wrap,#timeman_main)")){
					if(target.parents(".timeman-wrap,#timeman_main").length == 0)
						$("#timeman_main").css("display","none");
				}
			})
		})
	</script>
<% end %>