哈喽,首先和大家说声抱歉,停更了这么久,主要是期间因为工作调动的关系,工作变忙了,没有时间来更新了,今天趁着领导不在,偷偷来更新一下吧~
首先我的分享方式可能和别人的不同,别人可能是从最开始的一步一步开始教起,我不是,我是先把效果展示给大家,让大家先看看这个东西,然后我再开始讲,有看不下去的现在就可以吧网页关了,免得看完又来喷我,我不是什么大神,喷我有什么用?我看的心里还不舒服,是吧,为了营造良好的网络环境,别喷啊~
接下来进入主题:
大家可能都看过下面的这个网页截图
这个是一个类似于计时器的这么一个情侣间的网页,今天我的目的就是把大家都教会了(不会的我下面会放源码),然后回家有兴趣的可以做好展示给自己的另一半看看~
我也放个网址吧,让你们可以看看实际效果是什么样的
http://1.giggle.applinzi.com/shouye1.html
就是这个样子,虽然可能过气了吧,但是我相信你的另一半看完还是会很感动的
那么接下来,我要放html的源码了:然后我会开始讲解:
G家life@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
My name = Guan Jiaqi
Your name = Shen Jimei
Be attracted to you;
Like a person without reason;
I believe this sentence is wrong for a long time;
时到 花自开;
你是非常可爱的人.
真应该遇到最好的人
我也真希望 我就是;
Sun for day, moon for night, and you forever.
I want to say:
You are the sun at two in the morning;
玲珑骰子安红豆
入骨相思知不知
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2017, 2, 14);
together.setHours(19);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!
Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
上面这个就是html的源码,当然还有css和js的源码我还没有给到大家,主要是大家目前还没有对html有个了解,再去学css和js就会有点懵逼的样子了
那我从第一行开始讲起吧,
第一行是告诉浏览器,我这个是HTML5,所以你要用h5的格式去解析。这个不是很重要,反正每个页面上都有的。
第二行之前讲过,我就不再叙述了,是html网页的开头标签,相当于就是告诉html,我要开始写代码啦
第三行之前也讲过,是html中的头文件开头标签
第四行meta是告诉浏览器接受一个html文档
等等,领导回来了……,我明天再说了