JS获取服务器日期,自动切换网页信息
身为班上的卫生委员,你是不是因为每天要提醒同学打扫卫生而感到烦恼?
现在我们就来解决这个麻烦,每天只要发个链接到群里就好了.
本项目涉及云空间,有服务器的同学可以自由扩展
在该项目中我所使用的为:
GitHub(yourGitHubname.github.io/) and 云图片储存为:
www.tietuku.com
本项目所涉及知识:
1.Javascript
2.GitHub平台基本使用
3.Git仓库管理
4.图片云储存平台使用
需要一定github管理基础 & HTML基础
1.我们先把云图片储存给解决掉
1.1 准备:
单周日卫生表图片
双周日卫生表图片
大扫除卫生表图片
大家可以自由扩展,本人是根据本人环境来开发的
1.2 开始:
1.登录云图片储存空间(推荐一个免费平台:www.tietuku.com)
2.上传图片
3.自己找到如何可以将上传的图片外链的方法
例:http:// domain name / Catalog / your picture.jpg
2. 解决了图片存储问题,现在我们来用 javascript 代码实现功能
我们先需要整理思路:
手绘js思维导图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dRHSW7yv-1607946074736)(/images/swdt1.jpg)]
难点:
1.如何get周数
2.周数判断,然后打印出"明天"的卫生打扫表
关键代码:
new Date().getDay();
//将返回现在时间
星期天~星期六:0 1 2 3 4 5 6
参考资料:JavaScript的Date对象
window.location.href=" URL ";
//跳转网页
例:window.location.href=" "https://uiuing.com/"
;` 这是我blog的链接 (> v <)大家可以不加
http://
也可以 但建议加http://
orhttps://
my blog 可以直接访问 uiuing.top (>. <)小知识:
http
是协议
(http协议)
https
ishttp
的加密
(https)
应有免费的ssl
体验 (ssl) (ssh)
判断语法:
if (条件) //if判断
{
只有当条件为 true 时执行的代码
}
else if (...)
{
只有当if条件为 true 时执行的代码
}
else(...)
{
只有当所以 if条件为 falsh 时执行的代码
}
javascript源码
<script>
alert("请打扫好卫生!查看明天卫生请点击“确定”");
var date = new Date().getDay();
//get time 并赋值
date++;
//意为:显示明天明天的卫生 date++ 可以写成 date = date + 1 ;
if(date = 7)
{
date = 0 ;` ** `
//没有7 只有 0(星期天)
}
if(date = 2 && 4 && 6)
//当time = 周 2,4,6 时
{ //双
window.location.href="jpg";
}
else if(date = 3 && 5 && 0)
//当time = 周 3,5,0 时
{ //单
window.location.href="jpg";
}
else if(date = 1)
//当time = 周 1 时
{
window.location.herf="jpg";
}
// © 2017 uiuing uiuing.top
</script>
大家可以复制粘贴然后进行修改,链接为云图片储存平台所提供给你的你指定的图片外链
大家可复制范例代码用浏览器运行,看看是什么效果哦~
3. 最后一步! 使你的成果可以通过外网可以访问!
将你制作的js代码保存为 :
English name.html
将该文件上传到你的GitHub blog 根目录 !
git remote add origin git@github.com:stormzhang/test.git
//连接你的github仓库,也可通过ssh配置,origin为仓库名
git push origin master
//将代码提交到不同仓库中,可以指定分支
git pull origin master
//先将github上的代码pull下来
git push origin master
//上传至该分支
访问:
your github name
.github.io /
Catelog English name.html
(1.手动上传 ,2.使用git命令)如果你的github blog绑定域名那可以: your domain name
/
Catalog English name.html