霍者博客

欢迎访问JS最新发布

JS判断地区跳转，指定省份跳转代码，利用新浪api进行跳转

判断地区跳转代码，可以识别当前用户省份，市地区，然后跳转到指定的url上。

如：北京用户跳转到bj.html  ， 上海用户自动跳转到sh.html

黑帽技术常用手段之一，做黑帽的经常使用此方法劫持流量

下面的代码就是利用新浪api进行跳转,代码如下：请各位按自己需求进行修改

<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" charset="GB2312" ></script>
<script>
var _area=remote_ip_info.province;
if( _area=='北京'){
    window.location.href="/bj.html";
}else if( _area=='上海'){
    window.location.href="/sh.html";
}else{
    window.location.href="http://www.huozheweb.com/";
}
</script>


...

js中几种常用的输出方式

1、alert("要输出的内容");

->在浏览器中弹出一个对话框,然后把要输出的内容展示出来

->alert都是把要输出的内容首先转换为字符串然后在输出的

2、document.write("要输出的内容");

->直接的在页面中展示输出的内容

3、console.log("要输出的内容");

...

这样学Javascript可以事半功倍

新手在学习JavaScript时往往会缺乏方向，没有系统的学习方向，自然学的不稳固。但是，有了这几张思维导图，我们新手小白学习JavaScript就不用像无头苍蝇一样乱窜了。因为毕竟学习的道路就是要不断的总结归纳，俗话说好记性不如烂笔头。所以，下面将前人给我们出了这8张javascript相关的思维导图。相信会让我们学习起来事半功倍的。

思维导图：思维导图又叫心智图，是表达发射性思维的有效的图形思维工具 ，它简单却又极其有效，是一种革命性的思维工具。思维导图运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接，思维导图充分运用左右脑的机能，利用记忆、阅读、思维的规律，协助人们在科学与艺术、逻辑与想象之间平衡发展，从而开启人类大脑的无限潜能。思维导图因此具有人类思维的强大功能。

...

div各行变色代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div各行变色代码</title>
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#fff;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#ccc;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#ffc;line-height:30px; text-indent:1em;font-size:12px;}
</style>
<script type="text/javascript">
 window.onload = function() {
    changeColor('content');
    changeColor('content2');//写上要控制的UL的ID，想控制几个就控制几个
    changeColor('content3');
}
function changeColor(id) {
    var arrayli = document.getElementById(id).getElementsByTagName('li');
        var bool = true; //奇数行为true
        var oldStyle; //保存原有样式
        for(var i = 0;i<arrayli.length;i++){
            //各行变色
            if(bool === true){
                arrayli[i].className = "change";
                bool = false;
            }
            else {
                arrayli[i].className = "";
                bool = true;    
            }
            //划过变色
            arrayli[i].onmouseover = function() {
                oldStyle = this.className;
                this.className = "current"
            } 
            arrayli[i].onmouseout = function() {
                this.className = oldStyle;
            } 
        }
}
</script>
</head>
<body>
    <span>第一个UL</span>
    <div class="container">
        <ul id="content">
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
        </ul>
    </div>
    <br />
    <span>第二个UL</span>
    <div class="container">
        <ul id="content2">
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
        </ul>
    </div>
    <span>第三个UL</span>
    <div class="container">
        <ul id="content3">
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
            <li>隔行变色，划过变色</li>
        </ul>
    </div>
</body>
</html>

其实除了上面的用到的js以外，单纯的使用CSS3里的伪类:nth-child也是可以做出这个效果的。

...