JavaScript学习篇（9）
js中的几个综合例子
（1）遍历字符串输出字符计数
var str = "齐格蒙少妞SEI代，666 cai";
//几个汉字 字母 数字 其它几个?
var chs =0;
var num= 0;
var eng=0;
var other=0;
str = str.toLowerCase();
for(var i=0;i<str.length;i++){
var c =str.charAt(i);//获得指定下标位置的字符
if(c>='0'&&c<'9'){
num++;
}else if(c>='a'&&c<='z'){
eng++;
}else if(c>='\u4e00'&&c<='\u9fa5'){
chs++;
}else{
other++;
}
}
console.log("汉字"+chs);
console.log("字母"+eng);
console.log("其它"+other);
console.log("数字"+num);
（2）输入身份证获知生日及性别
var pid="410221197812180015";
//获取性别
var c = pid[pid.length-2];
//alert(c);
var rs = c%2==1?"男":"女";
console.log("性别是"+rs);
//保存年
var y =pid.substring(6,10);
var m=pid.substring(10,12);
var d =pid.substring(12,14);
console.log(y+"年"+m+"月"+d+"日");
（3）隔行变色
js:
window.onload=function(){
//1 获得表格
var tab = document.getElementById("table1");
//2 获得行数
var len = tab.rows.length;
//3遍历
for(var i=0;i<len;i++){
if(i%2==0){
//对偶数行填个背景色
tab.rows[i].style.backgroundColor="pink";
}else{
//奇数
tab.rows[i].style.backgroundColor="red";
}
}
}
jQuery：
$(function(){
$("table tr:odd").css("background-color","red");
$("#table1 tr:even").css("background-color","green");
});
（4）隐藏和显示
<script>
$(function(){
time = setInterval("show1()",1000);
});
function show1(){
// $("#img1").show(5000);
//$("#img1").slideDown(2000);
$("#img1").fadeIn(2000);
clearInterval(time);
time = setInterval("hidden1()",2000);
}
function hidden1(){
//$("#img1").hide(2000);
$("#img1").fadeOut(5000);
clearInterval(time);
}
</script>
<body>
<img src="img/banner1.jpg" id="img1" style="display: none;"/>
</body>
（5）简单城市列表（创建节点）
<script>
window.onload=function(){
document.getElementById("btn").onclick=function(){
//获得ul
var vul = document.getElementById("ul1");
//创建“深圳” 创建 文本 节点
var textN = document.createTextNode("深圳");
//创建标记 创建 标记
var ele = document.createElement("li");
//将“深圳” 放进li中 appendChild 追加
ele.appendChild(textN);
//将li放进 ul
vul.appendChild(ele);
}
}
</script>
<body>
<input type="button" value="添加新城市" id="btn" />
<ul id="ul1">
<li>成都</li>
<li>郑州</li>
<li>杭州</li>
<li>深圳</li>
</ul>
</body>
（6）复杂城市列表（可下拉）
<script>
var cites = new Array(3);
cites[0]=new Array("郑州","洛阳","开封","商丘");
cites[1]=new Array("济南","青岛","日照","东营");
cites[2]=new Array("石家庄","唐山","邯郸","衡水");
cites[3]=new Array("太原","大同","乔家大院","煤矿");
function changeCity(val){
var citySelect = document.getElementById("city");
//7 清空第二个select
citySelect.options.length=0;
// 1 循环遍历 中的省份
for(var i =0;i<cites.length;i++){
// 8 判断所选择的省份
if(val==i){
//2遍历对应的城市
for(var j= 0;j<cites[i].length;j++){
// alert(cites[i][j]);
// 3 创建城市的 文本节点
var cityNmae = document.createTextNode(cites[i][j]);
//4 创建option
var Option = document.createElement("option");
// 5 将城市文本 放入option中
Option.appendChild(cityNmae);
//6将option 放select id="city"中
citySelect.appendChild(Option);
}
}
}
}
</script>
<body>
<select name="" id="" onclick="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">河南</option>
<option value="1">山东</option>
<option value="2">河北</option>
<option value="3">山西</option>
</select>
<select name="" id="city">
</select>
</body>
