调度引擎>> Scheduling-Engine>> 返回
项目作者： peterburdette

项目描述 ：
A javascript engine for scheduling alerts and content with built in auto-display/removal logic.
高级语言： JavaScript
项目地址: git://github.com/peterburdette/Scheduling-Engine.git
创建时间： 2018-06-28T03:05:23Z
项目社区：https://github.com/peterburdette/Scheduling-Engine
开源协议：MIT License
下载


Scheduling-Engine

A javascript engine for scheduling alerts and content with built in auto-display/removal logic.

Getting Started

Installation

Add the latest Scheduling Engine files to the header of your site.

  1. <script src="scheduling_engine.js"></script>
  2. <script type="text/javascript">
  3. window.onload = function(){
  4.     // Set the start and end dates/times (MM/DD/YY & HH/MM/SS)
  5.     dateCheck = scheduleEngine("January 1, 2019 11:59:00", "January 1, 2019 12:00:00");
  7.     // Identifies the target DOM element where the message should be appended
  8.     var id = 'alert';
  9.     // Message to be displayed
  10.     var message = document.createTextNode("This is a test message.");
  11.     // Expiration message to be displayed
  12.     var expirationMessage = document.createTextNode("This message has expired.");
  14.     // Checks for condition to be true
  15.     if (dateCheck == 1) {
  16.         document.getElementById(id).appendChild(message); // Set ID to the targeted element
  17.     } else {
  18.         document.getElementById(id).appendChild(expirationMessage); // Set ID to the targeted element
  19.     }
  20. };
  21. </script>
  23. <div id="alert"></div>

For deployment use the minified version instead:

  1. <script src="scheduling_engine.min.js"></script>

Create a DOM element

Add an HTML element in the <body> of your site. This will be used later to connect the schedule engine logic to the DOM.

  1. <div id="alert"></div>

Set start and end dates

Start and end dates are set in the MM/DD/YY and HH/MM/SS formats. Search for the scheduleEngine function and set the sDate and eDate.

  1. dateCheck = scheduleEngine("January 1, 2018 11:59:00", "January 1, 2018 12:00:00");

Connect the logic to the DOM

In the dateCheck conditional statement change #alert to the ID you assigned to your DOM element.

  1. document.getElementById(id).appendChild(message); // Set ID to the targeted element

Once done publish your changes and enjoy!

Expired Content

Want to add a message or alternative content if you’ve reached the expiration date? Just add the following code onto the dateCheck conditional statement.

  1. else {
  2.     document.getElementById(id).appendChild(expirationMessage); // Set ID to the targeted element
  3. }

The final result should look something like this:

  1. // Checks for condition to be true
  2. if (dateCheck == 1) {
  3.     document.getElementById(id).appendChild(message); // Set ID to the targeted element
  4. } else {
  5.     document.getElementById(id).appendChild(expirationMessage); // Set ID to the targeted element
  6. }

Demo

See the demo on JSFiddle.

Browser Support

Supported Browsers : Chrome, Firefox, Safari, Opera, Edge, IE7+.

License

The source code can be found on github and is licensed under the MIT license.

Developed by Peter Burdette