Saber 酱的抱枕

看到别的网站，有的选项卡都是用传参的方式切换的，避免了代码重写，于是我也试着做了一个。

demo下载　　查看demo

    <script type="text/javascript">
    	function setTab (tabTitId,tabPre,tabNum) {//参数是tab标题的id，本组tab的公共前缀，本组tab的个数。
    		//把字符串传参的时候，要加单引号。不是字符串也不是数字的时候，传递的是页面的元素。
    		for (var i = tabNum; i > 0; i--) {
    			document.getElementById(tabPre+i+"_tit").className="tab_Tit_off";//所有标题设置className
    			document.getElementById(tabPre+i+"_box").style.display="none";//隐藏所有box
    		};
    		document.getElementById(tabTitId).className="tab_Tit_on";//对当前标题设置className
    		document.getElementById(tabTitId.replace("tit","box")).style.display="block";//显示当前标题对应的box
    	}
        setTab('tab1_1_tit','tab1_',4);//页面载入后对第一个tab执行一次
        setTab('tab2_1_tit','tab2_',3);//页面载入后对第一个tab执行一次
    </script>

选项卡标题和内容的id使用相同的前缀和有规律的序号，再把当前标题的id、选项卡的前缀、个数传递到函数里。class只和样式有关。

通过传参进行tab选项卡切换一例

使用了js的substring()方法截取字符串，并使用定时器控制字符增加的间隔时间。代码如下：

    <div class="textbox" style="text-align: center;font-family:  Microsoft YaHei;"></div>
    <script type="text/javascript">
    	var textword="Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.";
    	var textbox=document.getElementsByClassName("textbox")[0];
    	var textlength=1;
    	var startAdd;
    	function textwordAdd () {
    		textbox.innerText=textword.substring(0, textlength);
    		if (textlength<=textword.length) {
    			textlength++;
    		}else{
    			clearInterval(startAdd);
    		};
    	}
    	startAdd=setInterval(textwordAdd, 100);
    </script>

定时器单独设置了一个变量。如果直接用window.setInterval和window.clearInterval的方式的话，清除定时器是无效的。
参考：JS截取字符串substr 和 substring方法

js制作文字逐字出现的效果

js的三种对话框：
1.alert();弹出消息
2.confirm(); 返回一个布尔值
3.prompt(); 获取输入的内容

    <script type="text/javascript">
    	function liwu () {
	    	alert("这是送给你的小礼物~");
	    	var aa=confirm("请问您接受礼物吗?");//返回布尔值，也可直接写在判断条件中
	    	if(aa){
	    		var name=prompt("请输入你的姓名",""); //变量储存了prompt的值
	    		if (name==""||name==null) {
	    			alert("你是小狗！");
	    		} else{
	    			var songName=prompt("你最喜欢的歌曲是什么？","");
	    			if (songName==""||songName==null) {
	    				alert("哼，拜拜！");
	    			} else{
	    				alert(name+" 我点一首你最喜欢的《"+songName+"》作为送给你的礼物！")
	    			};
	    		};
	    	} else{
	    		alert("礼物接受失败!");
	    	};
    	}
    </script>
    <a href="" onclick="liwu()">接收礼物</a>

js的 Window 对象方法

js弹出对话框的使用

    <script type="text/javascript">
        function tanchu (t) {
            alert(t);
        }
    </script>
    <div id="a" onclick="tanchu(this.innerText)">雪见仙尊</div>
    <div id="b" onclick="tanchu(this.innerText)">小鸟游六花</div>

慢慢学习Orz

js封装和传参的简单示例

可以无压力用在基于WordPress原生评论上。
Read More →

给wordpress评论框添加颜文字