练习题

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

随机推荐

webpack打包avalon＋mmRouter
这是上一篇<webpack打包avalon+oniui+jquery>的姐妹篇,avalon 的高级应用篇.大家要知道,现在最流行的网页架构就是SPA,SPA能提高用户体验.用户许多数据都 ...
通过给事件处理程序传递this参数，获取事件源对象的引用。单机提交按钮时在信息框中显示用户输入的字符。
<script> function mymethod(str) { alert("您输入的是:"+str); } </script><form act ...
吴裕雄 python神经网络（8）
# -*- coding=utf-8 -*-import numpy as npimport kerasfrom keras.models import Sequentialfrom keras.la ...
十分钟搞定pandas
转至:http://www.cnblogs.com/chaosimple/p/4153083.html 本文是对pandas官方网站上<10 Minutes to pandas>的一个简单 ...
SQL思维导图总结
Feign 注意事项
一.FeignClient注解 FeignClient注解被@Target(ElementType.TYPE)修饰,表示FeignClient注解的作用目标在接口上 1 2 3 4 5 @FeignC ...
CentOS上开启MySQL远程访问权限
在CentOS上安装完MySQL后,默认不开始远程访问控制.可以进行如下设定开启. 登录MySQL: mysql -uroot -p 如需修改密码,第一次: mysqladmin -u root pa ...
针对SO交期回写的工厂日历功能调整
针对所有SO回写的交期,在最终写入SAP系统时,如果交期落在周日的,则自动往后延迟一天到周一,前期已经开发的长节假日UI维护的功能不变(按照UI的开始和结束时间跳过此段时间不规划). 当加1天时落在国 ...
msf客户端渗透（八）：持久后门，mimikatz使用，获取PHP服务器shell
持续后门先获取一个session 在目标主机上生成持续后门设置侦听参数启动侦听重新启动被攻击的主机一启动攻击者时获取到session mimikatz的使用 mimikatz是俄罗斯组织开发 ...
五、Singleton 单例模式
需求:保证对象只创建一次说明: 分为懒汉式.饿汉式,通过是否一开始就创建静态对象.饿汉式需要考虑线程并发的安全懒汉式: public class Singleton { private stati ...

JavaScript 练习题

练习题

JavaScript 练习题的更多相关文章

随机推荐

热门专题