练习题

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 ...

随机推荐

Java泛型类型擦除以及类型擦除带来的问题
目录 1.Java泛型的实现方法:类型擦除 1-2.通过两个例子证明Java类型的类型擦除 2.类型擦除后保留的原始类型 3.类型擦除引起的问题及解决方法 3-1.先检查,再编译以及编译的对象和引用传 ...
Chatbot中的填槽(Slot Filling)（转）
以下内容是学习了@我偏笑发布在公众号hanniman文章后,加上自己观点重新输出配图的文章原文链接:http://t.cn/RE0FkgD 跳槽,吐槽,匹诺曹都听过,这个填槽,emmmm,黑人问号脸 ...
Mesh.CombineMeshes
[Mesh.CombineMeshes] public void CombineMeshes(CombineInstance[] combine, bool mergeSubMeshes = true ...
appium的内存泄露问题
appium的一个内存泄露的问题标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...
解题7（FindFirstOnlyOne）
题目描述找出字符串中第一个只出现一次的字符输入描述: 输入一个非空字符串输出描述: 输出第一个只出现一次的字符,如果不存在输出-1 示例1 输入 asdfasdfo 输出 o 代码如下: pac ...
MQ中间件死信队列深度不断增加问题解决案例
感谢作者: http://www.wo81.com/tec/mid/mq/2014-04-14/94.html MQ中间件死信队列深度不断增加问题解决案例 ❞ ☜ ☞ 作者:彭新日期:2014-0 ...
cdh 5.13 hadoop 集群IP变更详细步骤
1.因一些不可抗因素,集群IP变更. 修改CM的数据库IP地址 /etc/cloudera-scm-server/db.p... 2.修改每个主机的hosts列表 3.修改SCM数据库的hosts表中 ...
第三章列表（b）无序列表
Python os.sep（）
os.sep是什么 python是跨平台的.在Windows上,文件的路径分隔符是'\',在Linux上是'/'. 为了让代码在不同的平台上都能运行,那么路径应该写'\'还是'/'呢? 使用os.se ...
最短路+叉积 poj1556
题目链接:The Doors - POJ 1556 - Virtual Judge https://vjudge.net/problem/POJ-1556 题意是叫我们计算从(0,5)到(10,5) ...

JavaScript 练习题

练习题

JavaScript 练习题的更多相关文章

随机推荐

热门专题