js小案类

最新推荐文章于 2024-06-07 15:45:53 发布

置顶栈长

最新推荐文章于 2024-06-07 15:45:53 发布

阅读量219

点赞数

分类专栏： java script 案类文章标签： javascript 案类-前端

本文链接：https://blog.csdn.net/wdzhszyq/article/details/70185662

版权

java script 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

案类

4 篇文章 0 订阅

订阅专栏

1.乘法口诀表

<script type="text/javascript">
        document.write("<table border='1'; cellpadding='20' cellspacing='10'>");  //整个表格
        for(var x=1; x<=9; x++){

            document.write('<tr>');//每一行
            for(var y=1; y<=x; y++){
                document.write('<td>'+x+'*'+y+'='+(x*y)+'</td>' );  //每一个单元格
            }

            for(var y=1; y<=9-x; y++){
                document.write('<td>&nbsp;</td>' );  //每一个单元格
            }
                document.write('</tr>');
        }
        document.write('</table>')
    </script>

2.选项卡方法一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="选项1" id="btn" style='background: yellow;'/>
        <input type="button" value="选项2" id="btn" />
        <input type="button" value="选项3" id="btn"/>
        <div style="display: block;">内容1</div>
        <div>内容二</div>
        <div>内容三</div>
    </body>
    <script type="text/javascript">
        //需求：点击按钮要显示对应的div，让其他的按钮背景色去掉，其他的div隐藏；
        //关键：如何找到上一个点击的input
        /*分析：
         * 1.获取所有的按钮及元素
         * 2.给每一个按钮添加点击事件
         * 2.1把上一个点击按钮的背景色去掉；
         * 2.2把上一个点击的按钮对应的div隐藏；
         * 2.3给当前按钮添加背景色；
         * 2.4让当前点击按钮对应的div，让他显示
         */

        window.onload=function(){
            var inputs=document.querySelectorAll('input');
            var divs=document.querySelectorAll('div');

            var last=inputs[0];//初始点击的按钮，没有点击
            //console.log(inputs);
            //console.log(divs);

            for(var i=0;i<inputs.length;i++){
                inputs[i].index=i;//给每一个按钮加一个自定义属性，存的是他们对应的索引值
                inputs[i].onclick=function(){
                    last.style.background='';//把上一次点击对象的背景色去掉
                    //console.log(last);

                    divs[last.index].style.display='none';//上一个对应的div隐藏

                    this.style.background='yellow';//给当前点击的按钮加背景色

                    divs[this.index].style.display='block';//当前按钮对应的div显示
                    last=this;//把上一次点击的对象更新成当前点击的对象。
                }
            }
        }
    </script>
</html>

2.选项卡方法二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="选项1" id="btn" style='background: yellow;'/>
        <input type="button" value="选项2" id="btn" />
        <input type="button" value="选项3" id="btn"/>
        <div style="display: block;">内容1</div>
        <div>内容二</div>
        <div>内容三</div>
    </body>
    <script type="text/javascript">
        //需求：点击按钮要显示对应的div，让其他的按钮背景色去掉，其他的div隐藏；
        //关键：如何找到上一个点击的input
        /*分析：
         * 1.获取所有的按钮及元素
         * 2.给每一个按钮添加点击事件
         * 2.1把所有按钮背景色全部清空；------------思路二
         * 2.2把所有div全部隐藏；----------------思路二
         * 2.3给当前按钮添加背景色；
         * 2.4让当前点击按钮对应的div，让他显示；
         */
        //window.onload  页面打开事件
        window.onload=function(){
            var inputs=document.querySelectorAll('input');
            var divs=document.querySelectorAll('div');

            for(var i=0; i<inputs.length; i++){
                inputs[i].index=i;//从下标去找对应的div
                inputs[i].onclick=function(){
                    for(var i=0; i<inputs.length; i++){
                        inputs[i].style.background='';
                        divs[i].style.display='none';
                    }
                    //给当前点击的按钮加背景色，让对应的div显示；
                    this.style.background='yellow';
                    divs[this.index].style.display='block';
                }

            }
        }
    </script>
</html>

3.动态图片切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" id="prev" value="上一张"/>
        <input type="button" id="next" value="下一张"/>
        <img src="img/1.jpg" alt="" style="display: block;margin-top: 20px;" id="pic"/>
    </body>
    <script type="text/javascript">
        //需求;点击下一张图，让图片切成下一张；
        //    点击上一张图，让图片切成上一张；
        /*分析：
         * 1.获取input按钮，图片ID
         * 2.给按钮加点击事件
         * 2.1用属性操作的方法去修改图片的src
         * 2.2把数字存在一个变量中，点击下一张，就让这个变量加1，用字符串拼接的方法修改src属性
         */
        var prev=document.getElementById('prev');
        var next=document.getElementById('next');
        var pic=document.getElementById('pic');

        //点击事件
        var n=1;

        next.onclick=function(){
            //点击一下，让n加1

            //console.log(n);
            n++;
            if(n>5){
                n=5;
            }
            pic.src='img/'+n+'.jpg';
        }

        prev.onclick=function(){
            //点击一下，让n加1
            n--;
            //console.log(n);
            if(n<1){
                n=1;
            }
            pic.src='img/'+n+'.jpg';
        }
    </script>
</html>

4.文本框输出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="提交" id="btn"/>
        <input type="text" id="text"/>
        <div id="box" style="width:200px;height: 200px; border: 1px solid red;"></div>
    </body>
    <script type="text/javascript">
        //需求：点击按钮，把输入框中的内容输出到文本框中
        /*分析：
         * 1.获取按钮，文本框，输入框
         * 2.给按钮加点击事件
         * 2.1获取输入内容
         * 2.2把获取内容显示在box中
         */
        window.onload=function(){
            var btn=document.getElementById('btn');
            var text=document.getElementById('text');
            var box=document.getElementById('box');

            btn.onclick=function(){
                //获取用户输入内容
                var nei=text.value;
                //innerHTML

                //字符串拼接 '<p>'+nei+'</p>'
                //原来的内容   box.innerHTML
                //新输入的内容  '<p>'+nei+'</p>'
                var news='<p>'+nei+'</p>'
                /*box.innerHTML=box.innerHTML+news;*/   //新输入的在下面
                box.innerHTML=news+box.innerHTML;       //新输入的在上面

            }
        }


    </script>
</html>

5.循环变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        ul{
            margin: 0;
            padding: 0;
        }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    <script type="text/javascript">
        //需求：奇数一种颜色，偶数一种颜色
        /*分析
         * 1.获取所有的li，放在数组中
         * 2.判断是奇数还是偶数
         * 2.1偶数输出红色
         * 2.2奇数输出蓝色
         */
        var lis=document.getElementsByTagName('li');
        console.log(lis);//检查是否获取到数组；
        for(var i=0; i<lis.length; i++){
            lis[i].style.height='50px';
            lis[i].style.listStyle='none';
            if(i%2==0){
                lis[i].style.background='blue';
            }else{
                lis[i].style.background='red';
            }
        }
    </script>
</html>

6.秒转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>


        <input type="number" id="text"/>
        <input type="button" id="btn" value="转换"/>
        <div id="box"></div>
    </body>
    <script type="text/javascript">
        //845秒变成00时00分00秒
        //需求:把输入的数字转成标准时间，然后输出
        //分析：
        /*1.获取到按钮，输入框，文本框
         * 2.给按钮加点击事件
         * 2.1.获得输入数字；
         * 2.2.数字进行转换；
         * 2.3输出在文本框
         */
        var box=document.getElementById('box');
        box.style.width='173px';
        box.style.height='200px';
        box.style.background="pink";
        box.style.overflow='auto';



        window.onload=function(){
            var btn=document.getElementById('btn');
            var text=document.getElementById('text');
            var box=document.getElementById('box');

            btn.onclick=function(){
                var num=text.value;
                if(num>=0){
                    var h=parseInt(num/3600);
                    var m=parseInt((num-h*3600)/60);
                    var s=(num-h*3600)%60;
                    var time=h+'小时'+m+'分钟'+s+'秒';
                    console.log(time);
                    var news='<p style="margin:0;">'+time+'</p>';
                    box.innerHTML=news+box.innerHTML; 
                }else{
                    time='不能输入负数'
                    news='<p style="margin:0;">'+time+'</p>';
                    box.innerHTML=news+box.innerHTML;
                }
            }
        }
    </script>
</html>

7.全选/全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <input type="checkbox" id="onc"/>全选/全不选
        </div>
        <ul>
            <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
            <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
            <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
            <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
            <li><input type="checkbox" name="" id="" value="" class="cb"/>123</li>
        </ul>
    </body>
    <script type="text/javascript">
    //依据标签的名称获得对象，全都选到
        /*var inputs=document.getElementsByTagName('input');*/
    //依据标签的class属性来获取，精确定位
        var inputs2=document.getElementsByClassName('cb');
        /*console.log(inputs2.length);*/
        document.getElementById('onc').onclick=function(){
            for(var i=0; i<inputs2.length; i++){
                inputs2[i].checked=this.checked;
            }
        }

    </script>
</html>

栈长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小案类

1.乘法口诀表<script type="text/javascript"> document.write("<table border='1'; cellpadding='20' cellspacing='10'>"); //整个表格 for(var x=1; x<=9; x++){ document.write('<tr>');//每一行
复制链接

扫一扫

专栏目录