JS应用【补充】

选项卡

<div class="box1">
    <h3 class="title">
        <a href="javascript:void(0)" class="active">标题1</a>
        <a href="javascript:void(0)">标题2</a>
        <a href="javascript:void(0)">标题3</a>
        <a href="javascript:void(0)">标题4</a>
    </h3>
    <div class="content">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>
<div class="box2">
    <h3 class="title">
        <a href="javascript:void(0)" class="active">标题1</a>
        <a href="javascript:void(0)">标题2</a>
        <a href="javascript:void(0)">标题3</a>
        <a href="javascript:void(0)">标题4</a>
    </h3>
    <div class="content">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>



<script>
    window.οnlοad=function(){
        tabs("box1");
        tabs("box2");
    }
    function tabs(name){
        var cons = document.getElementsByClassName(name)[0].getElementsByClassName("content")[0].children;
        var sels = document.getElementsByClassName(name)[0].getElementsByClassName("title")[0].children;
        cons[0].style.display = "block";
        for (var x = 0; x < sels.length; x++) {
            sels[x].index = x;
            sels[x].onmouseover = function () {
                for (var y = 0; y < cons.length; y++) {
                    cons[y].style.display = "none";//隐藏其他模块内容
                }
                cons[this.index].style.display = "block";//显示当前鼠标放上去时对应的模块内容
            }
        }
    }
</script>

留言板

<h3>留言板</h3>
<div class="content">
    <textarea name="" id="" cols="30" rows="10" class="con"></textarea>
    <button>提交</button>
</div>
<br/>
<hr/>
<div class="show">

</div>


<script>
    var x=1;
    var content=document.getElementsByClassName("content");
    var shows=document.getElementsByClassName("show")[0];
    var button=document.getElementsByTagName("button")[0];
    button.οnclick=function(){
        var conten=document.getElementsByClassName("con")[0].value;
        var ps=document.createElement("p");//创建p标签
        ps.innerHTML=x+"号豆子回复"+"<br/>"+conten+"<button class='remove'>删除</button>";
        x++;
        shows.appendChild(ps);
        document.getElementsByClassName("con")[0].value=null;//清空文本域内容
        var del=document.getElementsByClassName("remove");
        for(var i=0;i<del.length;i++){
            del[i].οnclick=function(){
                shows.removeChild(this.parentNode);//删除p标签
            }
        }
    }

</script>

99乘法表

<script>
    document.write("<table>");
    for(var x=1;x<10;x++){//行
        document.write("<tr>");
        for(y=1;y<x;y++){//列
            document.write("<td style='border:solid 1px black'>"+x+"*"+y+"="+x*y+"</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

加减乘除

输入X:<input type="text" class="x"/><br/>
输入Y:<input type="text" class="y"/><br/>
<input type="button" οnclick="cal('+')" value="+"/>
<input type="button" οnclick="cal('-')" value="-"/>
<input type="button" οnclick="cal('*')" value="*"/>
<input type="button" οnclick="cal('/')" value="/"/><br/>
输出：<input type="text" class="cac"/>

<script>
   function cal(fh){
       var x=parseFloat(document.getElementsByClassName("x")[0].value);
       var y=parseFloat(document.getElementsByClassName("y")[0].value);
       if(fh=="+"){
           document.getElementsByClassName("cac")[0].value=x+y;
       }
       if(fh=="-"){
           document.getElementsByClassName("cac")[0].value=x-y;
       }
       if(fh=="*"){
           document.getElementsByClassName("cac")[0].value=x*y;
       }
       if(fh=="/"){
           document.getElementsByClassName("cac")[0].value=x/y;
       }
   }

</script>

颜色的改变

<select name="" id="color">
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
    <option value="yellow">黄色</option>
</select>
<button>测试</button>
<div class="block"></div>

<script>
    var change1=document.getElementById("color");
    var click=document.getElementsByTagName("button")[0];
    click.οnclick= function () {
        var value=document.getElementById("color").value;
        var div=document.getElementsByClassName("block")[0];
        switch(value){
            case "green":{
                div.style.background="green";
                break;
            }
            case "blue":{
               div.style.background="blue";
                break;
            }
            case "yellow":{
                div.style.background="yellow";
                break;
            }
            default:{
                alert("不存在");
            }
        }
    }
</script>

测试

<p>测试</p>
请输入您的工资：<input type="text"/>万元<br/>
<button id="salary">测试</button>
你的属性是：<span></span>


<script>
    var salary=document.getElementById("salary");
    salary.οnclick=function(){
        var all=document.getElementsByTagName("input")[1].value;
        if(all>=1000){
            document.getElementsByTagName("span")[2].innerHTML="梦里啥都有";
        }
        else if(all>500){
            document.getElementsByTagName("span")[2].innerHTML="富婆";
        }
        else if(all>250){
            document.getElementsByTagName("span")[2].innerHTML="(▼へ▼メ)及格线";
        }
        else{
            document.getElementsByTagName("span")[2].innerHTML="活着有啥意思";
        }
    }
</script>

---

文本框获焦失焦

姓名：<input type="text" id="name" οnfοcus="focus1()" οnblur="blur1()"/><span class="tip"></span><br/>
性别：<select name="" id="sex" οnfοcus="focus()" οnblur="blur()" οnchange="changes()">
    <option value="男">男</option>
    <option value="女">女</option>
    </select>
<span class="tip"></span>

<script>
    function focus1(){
        document.getElementById("name").style.background="blue";
        document.getElementsByClassName("tip")[0].innerHTML="获得焦点";
    }
    function blur1(){
        document.getElementById("name").style.background="yellow";
        document.getElementsByClassName("tip")[0].innerHTML="失去焦点";
    }
    function changes(){
        var sex1=document.getElementById("sex").value;
        document.getElementsByClassName("tip")[1].innerHTML="您选择的性别是："+sex1;
    }

</script>

登记表

<h1>登记</h1>
<div>
    姓名：<input type="text" id="name"/>
    年龄：<input type="number" id="age"/>
    电话号码：<input type="text" id="tel"/>
    <button>提交</button>
</div>
<hr/>
<h2>登记表</h2>

<table border="1" width="70%" cellpadding="0" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话号码</th>
        <th>备注</th>
    <tr>

    </tr>
</table>


<script>
    var x=1;
    var tables=document.getElementsByTagName("table")[0];
    var click=document.getElementsByTagName("button")[0];
    click.οnclick= function () {
        var names=document.getElementById("name");
        var ages=document.getElementById("age");
        var tels=document.getElementById("tel");
        var trs=document.createElement("tr");
        /*创建一个新元素*/
        trs.innerHTML="<td>"+x+"</td>"+ "<td>"+names.value+"</td>"+ "<td>"+ages.value+"</td>"+ "<td>"+tels.value+"</td><td><span  class='del'>删除</span></td>";
        x++;
        tables.appendChild(trs);
        /*清空填写的内容*/
        names.value=null;
        ages.value=null;
        tels.value=null;
        /*删除新创建的p标签*/
        var dels=document.getElementsByClassName("del");
        for(var i=0;i<dels.length;i++){
            dels[i].οnclick=function(){
                tables.removeChild(this.parentNode.parentNode);
            }
        }
    }
</script>

获取当前时间

<span id="show"></span>
<button id="btn">停止时间</button>
<script>
    function times(){
    var now=new Date();
    if(now.getDay()==0){
        var xq="天"
    }
        document.getElementById("show").innerHTML="现在是："+now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日 星期"+xq+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
    // timer=setTimeout("times()",1000);
    }
  times();
   timer=setInterval("times()",1000);
   //时间的暂停
    document.getElementById("btn").onclick=function(){
    // clearTimeout(timer);
      clearInterval(timer);
    }

倒计时

<span id="count"></span>
<script>
    function countdown() {
        var nowtime = new Date();
        var newyear = new Date(2020, 0, 1, 0, 0, 0, 0);
        var time1 = parseInt((nowtime.getTime()) / 1000);
        var time2 = parseInt((newyear.getTime()) / 1000);
        var td = parseInt(time2 - time1);
        var day = Math.floor(td / (24 * 60 * 60));
        var hour = Math.floor((td - day * 24 * 60 * 60) / (60 * 60));
        var min = Math.floor((td - day * 24 * 60 * 60 - hour * 60 * 60) / 60);
        var sec = Math.floor(td - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60);
        document.getElementById("count").innerHTML = "距离元旦：" + day + "天" + hour + "时" + min + "分" + sec + "秒";
    }
    setInterval("countdown()",1000);
</script>

验证码

<input id=input type="text"/><span id="code"></span><span id="yz"></span>
<script>
    function change(){
        var one=parseInt(Math.random()*10);
        var two=parseInt(Math.random()*10);
        var three=parseInt(Math.random()*10);
        var four=parseInt(Math.random()*10);
        document.getElementById("code").innerHTML=one+""+two+""+three+""+four+"";
        document.getElementById("code").style.background="url(images/yz"+one+".jpg)"
    }
    change();
    document.getElementById("code").onclick=change;
    document.getElementById("input").onblur= function () {
        var input=document.getElementById("input").value;
        var title=document.getElementById("code").innerText;
        if(input==title){
            document.getElementById("yz").innerHTML="验证成功";
            change();
        }
        else if(input.length==0){
            document.getElementById("yz").innerHTML="请输入验证码！";
        }
        else{
            document.getElementById("yz").innerHTML="验证失败！请重新输入。";
            document.getElementById("input").value=null;
            change();
        }
    }
</script>

搜索框

<div class="ss">
    <p class="sousuo"><input id=searchbox type="text" placeholder="请输入搜索内容"/><input type="button" value="搜索"/></p>
    <div id="show">

    </div>
</div>
<script>
    var data=["cheyinyou","anzaixian","juhuishan","net","appple","orange","hello","fighting"];
    var shows=document.getElementById("show");
    var searchbox=document.getElementById("searchbox");
    searchbox.onkeyup=function(){
        var zhi=this.value;
        var newdata=[];
        shows.style.visibility="visible";
        shows.innerHTML=null;
        //键入时获取键盘输入值并判断是否在data数组内  找到其对应值  放入一个新数组
        for(var x=0;x<data.length;x++){
            if(zhi.trim().length>0&&data[x].indexOf(zhi)>-1){
                newdata.push(data[x]);
            }
        }
    //遍历新数组  创建p标签  并将数组的内容加入创建的p标签中
        for(var y=0;y<newdata.length;y++){
            var ps=document.createElement("p");
            ps.innerHTML=newdata[y];
            shows.appendChild(ps);
        }
    //点击p标签时将选中的p标签内容替换给input文本框  并隐藏p标签所在的下拉列表
        var pss=document.getElementById("show").children;
        for(var i=0;i<pss.length;i++){
            pss[i].onclick=function(){
                searchbox.value=this.innerHTML;
                shows.style.visibility="hidden";
            }
        }

    }
</script>