练习题

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

  1. HTML——JAVASCRIPT练习题——图片轮播

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. JavaScript练习题 全局变量 局部变量 作用域

    前沿:大家好~我是阿飞~本次 任何简单的事情都可以复杂化,本次让我们来做下搞事情的练习题吧 例题1: var a = 1; function fn1(){ var a = 2; alert(a); / ...

  3. 3月25 JavaScript 练习题

    一个关于找7的题 <script type="text/javascript" language="javascript"> for(var i=1 ...

  4. 廖雪峰JavaScript练习题3

    请尝试写一个验证Email地址的正则表达式.版本一应该可以验证出类似的Email: 正则表达式: <!DOCTYPE html> <html> <head> < ...

  5. 廖雪峰JavaScript练习题2

    请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...

  6. 廖雪峰JavaScript练习题

    练习:不要使用JavaScript内置的parseInt()函 数,利用map和reduce操作实现一个string2int()函数: <!DOCTYPE html> <html&g ...

  7. javascript练习题

    function Vertex(city, x) { this.name = city; this.num = x; } var node0 = new Vertex("邯郸", ...

  8. <JavaScript>几道javascript练习题

    问题1: 作用域(Scope) 考虑以下代码: (function() { var a = b = 5; })(); console.log(b); 控制台(console)会打印出什么? 答案 上述 ...

  9. javascript练习题（3）：基础字符串运算

    用两种方法实现下列问题! 1. 把一个字符串转化为驼峰写法 需求:margin-left=>marginLeft 思路一:split 把它转化为一个数组然后修改内容 function conve ...

随机推荐

  1. fopen函数出现段错误

    昨天写代码的时候突然发现了一个问题,当使用fopen("<filepath>", "r")时,如果filepath不存在,那么fopen函数并不是像 ...

  2. python小实例一：简单爬虫

    本文所谓的爬虫就是通过本地远程访问url,然后将url的读成源代码形式,然后对源代码进行解析,获取自己需要的数据,相当于简单数据挖掘.本文实现的是将一个网页的图片爬出保存到本地的过程,例子很简单,用的 ...

  3. delphi调用LUA函数来处理一些逻辑

    替同事做了个洛奇英雄传自动染色程序,关于屏幕取色的. 因为里面他对颜色的要求比较复杂,改动也比较大,于是我让他把逻辑写在 lua 脚本里面. uses LUA, LUALIB; function lu ...

  4. Nmap结果文件XML文件解析

    对nmap扫描结果xml格式的文件进行解析,无需直接xml解析或读取,可直接使用模块: 1.nmapparser 安装:pip install nmapparser Demo: #!/usr/bin/ ...

  5. Hibernate 再接触 组件映射

    将另外一个类嵌入到另外一个类 从而合并生成一张表 Husband.java package com.bjsxt.hibernate; import javax.persistence.Embedded ...

  6. Hibernate 再接触 核心开发接口

    1.可以重载方法进行配置文件的指定 sessionFactory = new AnnotationConfiguration().configure("hibernate.xml" ...

  7. 启用Flash Player 11.3的全屏键盘输入注意事项

    启用Flash Player 11.3的全屏键盘输入,注意以下事项: 1. HTML代码<param name=”allowFullScreenInteractive” value=”true” ...

  8. EF 安装框架

    在NuGet中安装ef框架 命令:Install-package EntityFramework

  9. PCA 降维

    http://f.dataguru.cn/spark-751832-1-1.html 我们可以利用PCA算法将向量的维数降低,从而实现特征转化.具体原理在<机器学习>课程中有详细的讲述.故 ...

  10. Applese走迷宫-bfs

    链接:https://ac.nowcoder.com/acm/contest/330/C来源:牛客网 题目描述 精通程序设计的 Applese 双写了一个游戏. 在这个游戏中,它被困在了一个 n×mn ...