如何在SharePoint 2013中定期更改背景图像

时间:2016-04-24 05:54:18

标签: sharepoint-2013

我是SharePoint新手,我希望根据日历场合自动更改SharePoint网站背景,

例如::在全年的季节(夏季,冬季,春季和秋季),每个季节都会改变背景。

顺便说一句,我尝试使用内置的SharePoint主题更改主题但不会改变任何内容。

所以请帮我用简单的步骤来实现这个目标,,,,

2 个答案:

答案 0 :(得分:0)

你可以使用javascript。 SharePoint的输出是html / javascript,因此您不应该处理与其他CMS /网站不同的任何内容。

在document.ready或document.load事件中调用此函数:

只看这个月:

function setBGBySeason() {
        var date = new Date();
        month = date.getMonth();

        winter = '12,1,2,';
        spring = '3,4,5,';
        summer = '6,7,8,';
        fall = '9,10,11,';

        season = 'unknown';

        if (winter.indexOf(month) != -1) {
            season = 'winter';
            bgcolor = "#003399";
        } else if (spring.indexOf(month) != -1) {
            season = 'spring';
            bgcolor = "#ffffcc";
        } else if (summer.indexOf(month) != -1) {
            season = 'summer';
            bgcolor = "#ffff00";
        } else if (fall.indexOf(month) != -1) {
            season = 'fall';
            bgcolor = "#f2ffe6";
        }

        document.body.style.background = bgcolor;
        console.log(season);
    }

观看完整日期:

var dates = {
convert:function(d) {
    // Converts the date in d to a date-object. The input can be:
    //   a date object: returned without modification
    //  an array      : Interpreted as [year,month,day]. NOTE: month is 0-11.
    //   a number     : Interpreted as number of milliseconds
    //                  since 1 Jan 1970 (a timestamp) 
    //   a string     : Any format supported by the javascript engine, like
    //                  "YYYY/MM/DD", "MM/DD/YYYY", "Jan 31 2009" etc.
    //  an object     : Interpreted as an object with year, month and date
    //                  attributes.  **NOTE** month is 0-11.
    return (
        d.constructor === Date ? d :
        d.constructor === Array ? new Date(d[0],d[1],d[2]) :
        d.constructor === Number ? new Date(d) :
        d.constructor === String ? new Date(d) :
        typeof d === "object" ? new Date(d.year,d.month,d.date) :
        NaN
    );
},
compare:function(a,b) {
    // Compare two dates (could be of any type supported by the convert
    // function above) and returns:
    //  -1 : if a < b
    //   0 : if a = b
    //   1 : if a > b
    // NaN : if a or b is an illegal date
    // NOTE: The code inside isFinite does an assignment (=).
    return (
        isFinite(a=this.convert(a).valueOf()) &&
        isFinite(b=this.convert(b).valueOf()) ?
        (a>b)-(a<b) :
        NaN
    );
},
inRange:function(d,start,end) {
    // Checks if date in d is between dates in start and end.
    // Returns a boolean or NaN:
    //    true  : if d is between start and end (inclusive)
    //    false : if d is before start or after end
    //    NaN   : if one or more of the dates is illegal.
    // NOTE: The code inside isFinite does an assignment (=).
   return (
        isFinite(d=this.convert(d).valueOf()) &&
        isFinite(start=this.convert(start).valueOf()) &&
        isFinite(end=this.convert(end).valueOf()) ?
        start <= d && d <= end :
        NaN
        );
    }
}

function setBGBySeason() {
    var date = new Date();
    var year = date.getFullYear();

    var springStart = new Date(year + "-03-21");
    var summerStart = new Date(year + "-06-21");
    var fallStart = new Date(year + "-09-21");
    var winterStart = new Date(year + "-12-21");

    var season = "unknown";
    var bgcolor = "white";

    if(dates.inRange(date, springStart, summerStart)){
        season = 'Spring';
        bgcolor = "#ffffcc";
    }else if(dates.inRange(date, summerStart, fallStart)){
        season = 'Summer';
        bgcolor = "#ffff00";
    }else if(dates.inRange(date, fallStart, winterStart)){
        season = 'Fall';
        bgcolor = "#f2ffe6";
    }else if(dates.inRange(date, winterStart, springStart)){
        season = 'Winter';
        bgcolor = "#003399";
    }

    document.body.style.background = bgcolor;
    console.log(season);
}

所以发生了什么:

  • 获取今天的日期
  • 检索日期月份
  • 根据月份我们可以确定季节
  • 为每个季节设置颜色
  • 使用document.body.style.background,我们设置了颜色 背景

PS:我发现stackoverflow上的日期对象,没有自己编写,但似乎工作应该

答案 1 :(得分:0)

无法在CSS文件中执行此操作,,,,,

相关问题