练习题

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 练习题的更多相关文章

HTML——JAVASCRIPT练习题——图片轮播
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
JavaScript练习题全局变量局部变量作用域
前沿:大家好~我是阿飞~本次任何简单的事情都可以复杂化,本次让我们来做下搞事情的练习题吧例题1: var a = 1; function fn1(){ var a = 2; alert(a); / ...
3月25 JavaScript 练习题
一个关于找7的题 <script type="text/javascript" language="javascript"> for(var i=1 ...
廖雪峰JavaScript练习题3
请尝试写一个验证Email地址的正则表达式.版本一应该可以验证出类似的Email: 正则表达式: <!DOCTYPE html> <html> <head> < ...
廖雪峰JavaScript练习题2
请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...
廖雪峰JavaScript练习题
练习:不要使用JavaScript内置的parseInt()函数,利用map和reduce操作实现一个string2int()函数: <!DOCTYPE html> <html&g ...
javascript练习题
function Vertex(city, x) { this.name = city; this.num = x; } var node0 = new Vertex("邯郸", ...
<JavaScript>几道javascript练习题
问题1: 作用域(Scope) 考虑以下代码: (function() { var a = b = 5; })(); console.log(b); 控制台(console)会打印出什么? 答案上述 ...
javascript练习题（3）：基础字符串运算
用两种方法实现下列问题! 1. 把一个字符串转化为驼峰写法需求:margin-left=>marginLeft 思路一:split 把它转化为一个数组然后修改内容 function conve ...

随机推荐

log4j 文件配置
//log4j配置日志文件输出到磁盘一天一个 log4j.appender.File=org.apache.log4j.DailyRollingFileAppenderlog4j.appender.F ...
ERROR: dump failed because assets could not be loaded
在命令行输入命令,想查看到app的包名,报错,如下: D:\测试\测试\android-sdk_r16-windows\android-sdk-windows\platform-tools>aa ...
对一个结果集（List）进行手动分页
对一个链表List,进行手动分页,核心代码就是pagin函数: import lombok.extern.slf4j.Slf4j; import org.junit.Before; import or ...
前端三大框架之一React入门教程
相信大家对框架这个词都很熟悉吧,我一直喜欢js原生来开发,但是目前都要求工作效率,所有使用框架或者是库会使我们开发更加方便和快速,甚至一个人干十个人的活.. 框架优点: 1.方便开发.快速写功能 2. ...
python-ceilometerclient命令行（终结）
ceilometerclient入口工程ceilometerclient shell.py中的main方法 ceilometerclient目录 --ceilometerclient --commo ...
SO\PR\MO\排产回写的数据如下
QTYOPEN(WMENG).EDATU(promised_mat_availdate).... insert into OUT_ORDER_RES ' ; --PR 净需求 ' ; ---加上PR回 ...
Pandas汇总和处理缺失数据
汇总的函数方法说明 count 非NA的值数量 describe 针对Series和DataFrame列计算汇总统计 min.max 计算最小值和最大值 argmin.argmax 计算能够获取到 ...
linux安装redis及主从复制、读写分离、哨兵模式
Redis安装与部署版本最好选择3.0及以上.以后还可以部署Redis集群. 1.下载: [root@bogon redis-3.0.0]# cd /usr/local [root@bogon lo ...
java序列化的认识（从多本书和多个博客中的总结）
Serializable接口是java.io下的一个标记接口,一个类要被序列化必须实现这个接口.
消除游戏源码 Match 3 Jewel Full 298 Levels
Match 3 Jewel Full 298 Levels 一款unity3d编写的消消乐游戏, 关卡丰富,很好玩下载地址:点击下载

JavaScript 练习题

练习题

JavaScript 练习题的更多相关文章

随机推荐

热门专题