标签 JavaScript 下的文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>String的属性和方法</title>
    <link rel="stylesheet" href="">
    <script>

    </script>
</head>
<body>
    Strin定义字符串有两种方法
    1.使用new语句通过调用字符串对象的构造函数定义一个字符串对象
    2.使用var语句定义一个字符串变量,而这个字符串变量可以直接使用字符串的方法个属性
    String对象的属性和方法
    String属性有三个:length,constructor,prototype
    <code>
        var s=0;
        var newString=new String("teacher");
        var s=newString.length;
        alert(s.toString(16));
    </code>
    <code>
        var newName=new String("Hello");
        if(newName.constructor==String);{
        alert("It is a String");
        }
    </code>    
    <code>
        function employee(name,age){
        this.name=name;
        this.age=age;
        }
        var info=new employee("kate",35);
        employee.prototype.saylary(null);
        info.salary=600;
        alert(info.salary);
    </code>
    
</body>
</html>

String对象的方法

方法名说明
anchor()为字符串对象中的内容两边加上HTML的<a></a>标记对
big()为字符串对象中的内容两边加上HTML的<big></big>标记对
bold()为字符串对象中的内容两边加上HTML的<b></b>标记对
fontcolor()为字符串对象中的内容两边加上HTML的<font></font>标记对,并设置color属性
charAt()返回字符串对象中的指定位置处的字符
charCodeAt()返回一个整数,该整数表示字符串中对象中指定位置处的字符的Unicode属性
indexOf()返回某个子字符串对象中第一次出现的字符位置
lastIndexOf()作用与indexOf()相似,但搜索方向为从右到左
match()使用正则表达式模式对字符串进行搜索,并返回一个包含该搜索结果的数组
replace()使用正则表达式模式对字符串进行搜索,并对搜索到的内容用指定的字符串替换
search()返回使用正则表达式模式搜索时,第一匹配的子字符串在整个被搜索的字符中的位置
slice()返回在一个字符串的两个指定位置之间的子字符串
split()返回一个字符串按某种分隔标记符拆分为若干子字符串时所产生的字符串数组
substr()返回从指定位置开始,取出具有指定长度个数的字符所组成的字符串
substring()返回从一个位置开始,到另外一个结束位置的所有字符所组成的字符串
toLowerCase()返回一个字符串,该字符串中的所有字母转换为小写字母
toUpperCase()返回一个字符串,该字符串中的所有字母转换为大写字母
valueOf()返回某个字符串对象的原始值

用于获取日期指定部分的方法

获取部分方法名说明
获取年份信息getFullYear()获取日期对象中的年份信息,使用本地时,以4位数表示
getUTCFullYear()使用UTC小时,以4位数表示
getYear()使用本地时,如果年份小于2000则以2位数表示,如果大于2000则以4位数表示。建议使用getFullYear()为佳
月份getMonth()使用本地时,返回0-11之间的整数
getUTCmonth()使用UTC月
天数getDate()使用本地时,返回0-31之间的整数
getUTCDate()使用UTC天
星期getDay()星期几的信息,使用本地时,返回0-6之间的整数
getUTCDay()使用UTC星期几
小时getHours()返回0-23之间的整数
getUTCHours()使用UTC小时
分钟getMinutes()返回0-59之间的整数
getUTCMinutes()使用UTC分钟
秒钟getSeconds()返回0-59之间的整数
getUTCSeconds()使用UTC秒钟
毫秒getMiliseconds()返回0-999之间的整数
getMiliseconds()使用UTC毫秒
时间差getTime()获取日期对象所代表额度时间与1970年1月1日0时之间的毫秒数差
getTimezoneOffset()获取日期所代表的时间与UTC小时之间的时差数,以分钟为单位

用于设置日期指定部分的方法

设置部分方法名说明
设置年份setFullYear(year[,month,day])设置日期对象中的年份信息,使用本地时
setUTCFullYear(year[,month,day])使用UTC小时
setYear(year)使用本地时,如果年份小于2000则以2位数表示
月份getMonth(month[,day])使用本地时
getUTCMonth(month[,day]使用UTC月
天数setDate(day)本地时
setUTCDate(day)UTC天
小时setHours(hours[,minutes,seconds,miliseconds])本地时
setUTCHours(hours[,minutes,seconds,miliseconds])UTC时
分钟setMinutes(minutes[,seconds,miliseconds])本地时
setUTCMinutes(minutes[,seconds,miliseconds])UTC时
setSeconds(seconds[,miliseconds])本地时
setUTCSeconds(seconds[,miliseconds])UTC时
毫秒setMiliSeconds(miliseconds)本地时
setUTCMiliSeconds(miliseconds)UTC时
通过毫秒设置时间setTime(miliseconds)通过距离1970年1月1日0时多少毫秒方式设置时间

将日期对象转移为字符串的方法

方法名说明
toDateString()将当前Date对象中的日期转换为字符串,返回格式为“星期 月份 天数 年份”
toTimeString()将当前Date对象中的日期转换为字符串
toUTCString()将当前Date对象转换以UTC时间表示的字符串
toGMTString()将当前Date对象转换以GMT时间表示的字符串
toLocalString()将当前Date对象转换以本地时间表示的字符串
toLocalDateString()将当前Date对象转换以本地时间表示的日期字符串
toLocalTimeString()将当前Date对象转换以本地时间表示的时间字符串
toString()将当前Date对象转换为字符串的形式表示

来自:一段JS代码让Markdown自动生成目录

实现方法

页面结构

//放入在文章页内容前面
<div class="BlogAnchor">
    <p>
        <b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录[-]</b>
    </p>
    <div class="AnchorContent" id="AnchorContent"> </div>
</div>

Js代码

//在文章中查找title并填充到div AnchorContent中
$(".post-content").find("h2,h3,h4,h5,h6").each(function(i,item){
    var tag = $(item).get(0).localName;
    $(item).attr("id","wow"+i);
    $("#AnchorContent").append('<li><a class="new'+tag+' anchor-link" onclick="return false;" href="#" link="#wow'+i+'">'+(i+1)+" · "+$(this).text()+'</a></li>');
    $(".newh2").css("margin-left",0);
    $(".newh3").css("margin-left",20);
    $(".newh4").css("margin-left",40);
    $(".newh5").css("margin-left",60);
    $(".newh6").css("margin-left",80);
});
$("#AnchorContentToggle").click(function(){
    var text = $(this).html();
    if(text=="目录[-]"){
        $(this).html("目录[+]");
        $(this).attr({"title":"展开"});
    }else{
        $(this).html("目录[-]");
        $(this).attr({"title":"收起"});
    }
    $("#AnchorContent").toggle();
});

CSS代码

/*导航*/
.BlogAnchor {
    background: #f4f7f9;
    padding: 10px;
    line-height: 180%;
}
.BlogAnchor p {
    font-size: 18px;
    color: #15a230;
    margin-bottom: 0.3em;
}
.BlogAnchor .AnchorContent {
    padding: 5px 0px;
}
.BlogAnchor li{
    text-indent: 20px;
    font-size: 14px;
}
#AnchorContentToggle {
    font-size: 13px;
    font-weight: normal;
    color: #FFF;
    display: inline-block;
    line-height: 20px;
    background: #5cc26f;
    font-style: normal;
    padding: 1px 8px;
    margin-right: 10px;
}
.BlogAnchor a:hover {
    color: #5cc26f;
}
.BlogAnchor a {
    text-decoration: none;
}

导航扩展

同时也可以实现锚点之间的平滑滚动,使用jquery animate

$(".anchor-link").click(function(){
    $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 1000);
});

结束







<script type="text/javascript"> //添加浏览器title滚动、闪动特效
var step=0;
var _title=document.title; //获取网页标题
var space='';
for(var i=0;i<=_title.length;i++)space+=' '; //根据标题长度生产相应的空字符
function flash_title(){
    step++
    if (step==3) {step=1}
    if (step==1) {document.title=space}
    if (step==2) {document.title=_title}
    setTimeout("flash_title()",500);
}
flash_title();
</script>



最近在一些博客看到侧边栏某些板块,随着滚动条的滑动,而跟着滑动或者固定的效果,感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。所以去网上找了一些资料,整理了一下,现在分享给大家,也方便以后自己查阅,希望对大家有用。

阅读全文



来自:用户不在当前标签页面改变title

实现代码

简单有效,将整个窗口绑定onblur和onfocus。
全选复制放进笔记

window.onblur = function() { document.title = "(●—●)";
}; window.onfocus = function() { document.title = "啦啦啦啦";
}

浏览器兼容性

目前主流的标准浏览器基本都已经支持,部门旧版浏览器需要增加内核前缀,IE从10开始支持。

常见应用场景

幻灯片播放时可在不可见时停止播放,恢复显示后继续播放
每隔一段时间向服务器请求数据的可在切换可见性时停止,减轻服务器负担
网站访问统计提供跟准确的数据
网站title根据可见性变换

例如在typecho主题里footer.php里添加

<script>
window.onblur = function() {
    document.title = "你在看什么呢?";
window.onfocus = function() {
    document.title = "<?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?>";
    }
};
</script>

另一个版本在http://blog.iplayloli.com/看到的

<script>
        var changeTitle = {
    originTitle: document.title,
    change: function() {
        document.title = " 草榴社區 - t66y.com ";
    },
    reset: function() {
        document.title = changeTitle.originTitle;
    }
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.change();
    } else {
        changeTitle.reset();
    }
});
</script>

chrome下右键“查看网页源代码”,就会看到

<script>
window.onblur = function() {
    document.title = "你在看什么呢?";
window.onfocus = function() {
    document.title = "用户不在当前标签页面改变title - 52M";
    }
};
</script>

实际效果可以在不同窗口下切换就看到


来自 http://www.zzhck.com/535.html

代码

<script type="text/javascript" language="javascript">
(function() {
function k(a, b, c) {
if (a.addEventListener) a.addEventListener(b, c, false);
else a.attachEvent && a.attachEvent("on" + b, c)
}
function g(a) {
if (typeof window.onload != "function") window.onload = a;
else {
var b = window.onload;
window.onload = function() {
b();
a()
}
}
}
function h() {
var a = {};
for (type in {
Top: "",
Left: ""
}) {
var b = type == "Top" ? "Y": "X";
if (typeof window["page" + b + "Offset"] != "undefined")
a[type.toLowerCase()] = window["page" + b + "Offset"];
else {
b = document.documentElement.clientHeight ? document.documentElement: document.body;
a[type.toLowerCase()] = b["scroll" + type]
}
}
return a
}
function l() {
var a = document.body,
b;
if (window.innerHeight) b = window.innerHeight;
else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
else if (a && a.clientHeight) b = a.clientHeight;
return b
}
function i(a) {
this.parent = document.body;
this.createEl(this.parent, a);
this.size = Math.random() * 5 + 5;
this.el.style.width = Math.round(this.size) + "px";
this.el.style.height = Math.round(this.size) + "px";
this.maxLeft = document.body.offsetWidth - this.size;
this.maxTop = document.body.offsetHeight - this.size;
this.left = Math.random() * this.maxLeft;
this.top = h().top + 1;
this.angle = 1.4 + 0.2 * Math.random();
this.minAngle = 1.4;
this.maxAngle = 1.6;
this.angleDelta = 0.01 * Math.random();
this.speed = 2 + Math.random()
}
var j = false;
g(function() {
j = true
});
var f = true;
window.createSnow = function(a, b) {
if (j) {
var c = [],
m = setInterval(function() {
f && b > c.length && Math.random()
< b * 0.0025 && c.push(new i(a)); ! f && !c.length && clearInterval(m);
for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
c[d].remove();
c[d] = null;
c.splice(d, 1)
} else {
c[d].move();
c[d].draw()
}
},
40);
k(window, "scroll",
function() {
for (var e = c.length - 1; e >= 0; e--) c[e].draw()
})
} else g(function() {
createSnow(a, b)
})
};
window.removeSnow = function() {
f = false
};
i.prototype = {
createEl: function(a, b) {
this.el = document.createElement("img");
this.el.setAttribute
("src", b + "雪花图片的绝对链接地址");
this.el.style.position = "absolute";
this.el.style.display = "block";
this.el.style.zIndex = "99999";
this.parent.appendChild(this.el)
},
move: function() {
if (this.angle < this.minAngle || this.angle > this.maxAngle)
this.angleDelta = -this.angleDelta;
this.angle += this.angleDelta;
this.left += this.speed * Math.cos(this.angle * Math.PI);
this.top -= this.speed * Math.sin(this.angle * Math.PI);
if (this.left < 0) this.left = this.maxLeft;
else if (this.left > this.maxLeft) this.left = 0
},
draw: function() {
this.el.style.top = Math.round(this.top) + "px";
this.el.style.left = Math.round(this.left) + "px"
},
remove: function() {
this.parent.removeChild(this.el);
this.parent = this.el = null
}
}
})();
createSnow("", 40);
</script>
将以上面代码直接复制粘贴到主题中的Header或者Footer文件中,
如果你只想让文章页面显示,那就直接添加到single就可以了。

雪花图片大家可以自己百度搜索,
本站所用的图片是:http://dl.m69w.com/wordpress/snow.png