saber酱的抱枕

Fly me to the moon

09/21
23:17
学习

jq的css()方法

此方法用来修改css属性,例:

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
     $("p").css("color","red");
  });
});
</script>

如果不修改而只是获取css属性的值,那么括号内只写属性就行了

jq的css()方法

09/21
22:05
学习

网页布局分析——fsn ubw tv动画官网

下图是fate stay nigth官网,作为一个游戏网站,突出了最新资讯的大图。

左侧是logo、导航、新闻推荐、活动链接、最新资讯的pv,右侧是最新资讯的大图展示,占据了大部分版面。大图不是背景图,而是右侧主体div里面的img标签,用width:100%;height:auto;来适应布局。当然作为body主体的wrap也设置了最小宽度。图片应该高度大于宽度,确保页面在最小布局的时候图片不会小于一屏。

底部贯通全屏,主体部分是横向排列的logo、大分类链接、新闻推荐、社交网站帐号、分享按钮。最底部是版权信息。

从整体配色上来看,黑白搭配,顶部色调深沉,底部则是淡雅的浅白色(查看所用的背景图片)。

所谓的大分类链接,就是和本站同等级的产品了,这几个链接除了出现在底部,还在顶部有显示。点击顶部的下拉三角按钮就会展开。

其实body里面是有一个全站通用背景的,在首页我们看不到,因为左侧被特意加了黑色背景,右侧则被大图遮挡了。在内页可以看到固定的背景图

备注:
在内页,左侧是有淡淡的黑色背景的。一般来说,我会考虑rgba属性,但是显然在ie里面会有兼容性问题。以前只能想到用背景图片来做兼容,现在查看此站左侧的css,如下:

第一句也是rgba,第二句也是,但是前缀"-pie-background"我看不懂,百度之,发现这句和第三句是联系在一起的,这个PIE.htc是在IE中实现css3一些效果的文件。又百度之,有空了可以参照此文研究研究。如果能用得了这个,则圆角、半透明背景色就可以不用切图了,善莫大焉。当然使用这个也是有一些限制的,要先仔细看看这篇文章。

网页布局分析——fsn ubw tv动画官网

09/19
18:05
学习

Serif和Sans-serif字体族

查看百度百科正文片段的规则时,发现这样的定义:

对最后的sans-serif不解,百度之,找到了博客园的一篇文章,原来sans-serif是无衬线字体族,Serif是有衬线字体族。

常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。font-family最后加上sans-serif,也是为了保证能够调用这个字体族里面的字体。

Serif和Sans-serif字体族

09/11
17:20
学习

一个生成百度网盘文件直链的网站

http://pan.plyz.net/
这个网站需要绑定百度网盘,也就是取得百度网盘授权。授权之后,在网盘里“我的应用数据”里面会生成一个plcould文件夹。

把文件上传到这个目录(或者把已有文件转移到这个目录),然后回到这个网站,刷新管理页面,即可看到存在的文件和文件直链。

文件的直链不同于分享链接,点击之后是直接把文件下载的,不需要打开分享页面再下载。这对单个文件的分享是很方便的,不知能不能提高防和谐能力。

一个生成百度网盘文件直链的网站

09/11
17:06
学习

一个短链接生成网站

点我进入

把长链接处理成短链接无疑增加了可读性。短链接的机制是通过算法生成网址的短网址,这个短网址还是需要服务商转换为原链接的。不同的服务商如腾讯和新浪,生成的短网址是不同的。我比较担心短网址会不会失效,不过现在这种情况貌似很少出现,姑且用着吧

一个短链接生成网站

09/10
18:07
学习

给网站加上了声音啦~

前几天去琉璃神社听到了一声“哦尼酱,dai~suki♥”,审查元素发现是用的html5播放的mp3文件。之后不知为何←_←我就去搜集了saber的声音,今天抽空加在了本站上有木有发现今天一连发了好几篇js相关的文章?其实都是添加的过程中搜索到的←_←

我准备了四个声音文件,对应时间分别是:
5-7点之间:   早上了,master
7-9点之间:   早上好
9-21点之间: 辛苦了,master
其余时间:     晚安

然后在底部模板添加了一个不可见的div,接着用js判断时间,最后把播放对应音频的代码添加到div里面。

<div id="sv" style="display: none;"></div>
<script type="text/javascript">
	if (window.location.href=="/") {
		//通过判断时间添加对应的saber的声音		
		var myDate = new Date();
	var nowtime=myDate.getHours();
	if (nowtime>=5&nowtime<7) {//早上了,master
		$("#sv").html("<audio autoplay='autoplay' src='/f/sv_%E6%97%A9%E4%B8%8A%E4%BA%86%EF%BC%8Cmaster.mp3'></audio>");
	}else{
		if (nowtime>=7&nowtime<9) {//早上好
		$("#sv").html("<audio autoplay='autoplay' src='/f/sv_%E6%97%A9%E4%B8%8A%E5%A5%BD.mp3'></audio>");
		}else{
			if (nowtime>=9&nowtime<21) {//辛苦了,master
		$("#sv").html("<audio autoplay='autoplay' src='/f/sv_%E8%BE%9B%E8%8B%A6%E4%BA%86%EF%BC%8Cmaster.mp3'></audio>");
			}
			else{//晚安
		$("#sv").html("<audio autoplay='autoplay' src='/f/sv_%E6%99%9A%E5%AE%89.mp3'></audio>");
			};
		};
	};
	
};
</script>

给网站加上了声音啦~

09/10
18:05
学习

jq输出html代码

jq中可以使用html()输出html代码,形如

$("#sv").html("<audio autoplay='autoplay' src='src'></audio>");

只是注意,双引号中间是html代码,html代码中出现的引号就只能用单引号了。

参考:http://holysonll.blog.163.com/blog/static/2141390932013411113333559/

jq输出html代码

09/10
17:53
学习

使用js创建页面元素的函数

    <div id="a"  style="background:#DAE0F1;">
        <p id="b">bbbbbbbbbbbbbbbbb</p>
    </div>
	<script type="text/javascript">
        function createE (tagName,id,className,style,innerHTML,addway,parentId,reforeId) {
            var newElement=document.createElement(tagName);
            newElement.id=id;
            newElement.className=className;
            newElement.style.cssText=style;
            newElement.innerHTML=innerHTML;
            if (addway=='end') {
                if (parentId=='body') {
                    document.body.appendChild(newElement);
                }else{
                    document.getElementById(parentId).appendChild(newElement);
                }
            }
            if(addway=='before'){
                 if (parentId=='body') {
                    document.body.insertBefore(newElement,document.getElementById(reforeId));
                 }else{
                    document.getElementById(parentId).insertBefore(newElement,document.getElementById(reforeId));
                }
            }
        }
        createE('div','aa','link','font-size: 30px;','追加在a的末尾','end','a','');
        createE('h1','','','font-size: 30px;','插入在a中的b之前','before','a','b');
        createE('h1','c','','font-size: 30px;','追加在body末尾','end','body','');
        createE('h1','d','','font-size: 30px;','插入在body中的a之前','before','body','a');
	</script>

输出如下:
使用js创建页面元素
今天写了个使用js创建页面元素的函数,如果有多个元素需要使用js来创建的话,倒还是可以方便一些的。函数参数如下:
元素的标签名,元素的id,元素的class名,元素的内部样式,元素的内部代码,追加方式(填写“end”或者“before”),追加到的父元素的id,父元素中子元素的id(仅当追加方式为before时填写)。
如果追加方式为end,则使用appendChild()方法追加到父元素内;如果追加方式为before,则使用insertBefore()方法插入到父元素内某个子元素之前。
考虑到body是创建元素时常用的一个节点,如果把父元素的id填写为“body”则会按body来处理。

使用js创建页面元素的函数

09/10
16:36
学习

js获取当前日期时间

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString();        //获取日期与时间

查看来源

js获取当前日期时间