练习题

1. 使用for循环输出1到50的值，要求每次循环只能输出一个值，每输出十个换一行。

2 日历生成器：

要求用户输入，这个月有多少天，本月1号是星期几，自动生成日历

3. 表格生成器

4. 分别使用 for循环、while循环、do..while循环实现以下四种效果

<script type="text/javascript">
    (function(){
        var arr=[10,20,30,40,50];
        for (var i =1; i<=50;i++){
            if (i<=9){
                document.write('0'+i.toString());
            }
            else{
                document.write(i.toString());
            }

            if (arr.indexOf(i)>=0){
                document.write('<br/>');
            }
        }
    })();

</script>

第一题

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style type="text/css">
        table {
            border:1px solid orange;
            border-collapse:collapse;//设置单元格之间的间隙为0
        }
        tr,td{
            border:1px solid orange;
            padding:0px;
        }
    </style>
</head>
<body>
<script type="text/javascript">

    (function(){
        var dateList=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
        document.write("<input type='text' id='daynum' value='31'><br/><input type='text' id='xingqiji' value='6'>");

        //打印表头
        document.write('<table>');
        document.write("<tr style='background:#b3b3b3;'>")
        for (var i=0;i<7;i++){

            if (i===0){
                document.write('<td style="border:1px solid red;color:red;">')
            }
            else if (i===6){
                document.write('<td style="border:1px solid green;color:green;">')
            }
            else {
                document.write('<td>')
            }

            document.write(dateList[i])
            document.write('</td>')
        }
        document.write("</tr>")

        var maxDay=document.getElementById('daynum').value.replace(' ','');
        var swop=false;
        var userInputDay=document.getElementById('xingqiji').value.replace(' ','');
        var maxLine=''//记录最大行数量,取决于1号是不是星期6，是的6行，不是5行

        if (userInputDay==='6'){
            maxLine=6;
        }else{

            maxLine=5;
        }
        maxDay=Number(maxDay)//用户输入的天数,最大31天最小28天
        var day=1;

        for (var i=1;i<=maxLine;i++){//输出行
            document.write("<tr>");
            for (var j=0;j<7;j++){//输出列

                if (maxLine===j){//判断用户输入的1号对应的是星期几??
                    swop=true;//这里默认值是false，只要两则不相等，就不打印任何数据
                }
                if (j===0){
                    document.write('<td style="border:1px solid red;color:red;">')
                }
                else if (j===6){
                    document.write('<td style="border:1px solid green;color:green;">')
                }
                else {
                    document.write('<td>')
                }

                if (swop){
                    document.write(day.toString());
                    day++;
                }

                document.write('</td>')
                if(day===maxDay){
                    break;
                }

            }
            document.write('</tr>')

        }

        document.write('</table>')
    })()
</script>
</body>
</html>

第二题

第二题最后的break 应该改为if （>）break;并且顺序提到前面去

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        tr,td{
            border:1px solid #b3b3b3;
        }
        div {
            /*float: left;*/
            /*width: 220px;*/
            width: 100%;
        }
        span{
            width: 250px;
            display: block;

        }

    </style>

</head>
<body>
    <h1>Tabel生成器</h1>
    <hr/>
    <div >
        <span>行数：<input type="text" id='lineNum' value='8'></span>
        <span>列数：<input type="text" id='rowNum' value='8'></span>
        <span>宽度：<input type="text" id='widthNum'  value='1000'></span>
        <span>border：<input type="text" id='borderNum'  value='2'></span>
        <button onclick="fn()">提交</button>

    </div>
<hr/>
<div id='app'>
</div>
    <script type="text/javascript">
        var fnn=(function(){
                var lineNum_value=document.getElementById('lineNum').value.replace(' ','');
                var rowNum_value=document.getElementById('rowNum').value.replace(' ','');
                var widthNum_value=document.getElementById('widthNum').value.replace(' ','');
                var borderNum_value=document.getElementById('borderNum').value.replace(' ','');
document.write(`<style type='text/css'>table{border-collapse: collapse;border:${borderNum_value}px solid black;width:${widthNum_value}px;table-layout:fixed;}tr,td{border:1px solid black;height:50px;}</style>`);

                document.write('<table>');//设置边框、列等宽、单元格之间间隙等

                for(var i=0;i<lineNum_value;i++){
                    document.write('<tr>');
                    for(var j=0;j<rowNum_value;j++){
                        document.write('<td></td>')
                    }
                    document.write('</tr>');
                }
                document.write('</table>');

            });

    var fn=(function(){
                var lineNum_value=document.getElementById('lineNum').value.replace(' ','');
                var rowNum_value=document.getElementById('rowNum').value.replace(' ','');
                var widthNum_value=document.getElementById('widthNum').value.replace(' ','');
                var borderNum_value=document.getElementById('borderNum').value.replace(' ','');
                var app_value=document.getElementById('app');
                var content=`<style type='text/css'>table{border-collapse: collapse;border:${borderNum_value}px solid black;width:${widthNum_value}px;table-layout:fixed;}tr,td{border:1px solid black;height:50px;}</style>`;

                content+='<table>';//设置边框、列等宽、单元格之间间隙等

                for(var i=0;i<lineNum_value;i++){
                    content+='<tr>';
                    for(var j=0;j<rowNum_value;j++){
                        content+='<td></td>';
                    }
                    content+='</tr>';
                }
                app_value.innerHTML=(content+'</table>');

            });

</script>
</body>
</html>

<!-- 固定table列等宽

固定table列等宽
style: {table-layout : fixed} 

html: style="table-layout:fixed"

js: object.style.tableLayout=fixed;

border-collapse: collapse; 单元格 之间的间隙
 -->

第三题

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        tr,td{
            border:1px solid #b3b3b3;
        }

    </style>
</head>
<body>

<script type="text/javascript">
    (function(){
        document.write('<table>');

        for (var i=1;i<=9;i++){
            document.write('<tr>');
            for (var j=1;j<=i;j++){

                document.write('<td>'+`${i}*${j}=${i*j}`+'</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');
    })();
document.write('<br/>');

    (function(){
        document.write('<table>');
        for (var i=9;i>0;i--){
            document.write('<tr>');
            for(var j=1;j<=i;j++){
                document.write('<td>'+`${i}*${j}=${i*j}`+'</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');
    })();

    (function(){
        document.write('<table>');
        for(var i=1;i<=9;i++){
            document.write('<tr>');
            for(var c=(9-i);c>=1;c--){
                document.write('<td style="border:0px;"></td>');
            }
            for(var j=1;j<=9;j++){
                    if(j<=i){
                        document.write('<td>'+`${i}*${j}=${i*j}`+'</td>');
                    }
            }
            document.write('</tr>');
        }
        document.write('</table>');
    })();

    (function(){
        document.write('<table>');
        for(var i=9; i>=1;i--){
            document.write('<tr>');
            for(var c=1;c<=(9-i);c++){
                document.write('<td style="border:none;"></td>');
            }
            for (var j=1;j<=i;j++){

                document.write('<td>'+`${i}*${j}=${i*j}`+'</td>');
            }

            document.write('</tr>');

        }
        document.write('</table>');
    })();

</script>
</body>
</html>

第四题

巴特西

JavaScript 练习题

练习题

最新文章

热门文章