JavaScript 练习题
练习题
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 ...
随机推荐
- python 多重继承 深度优先还是广度优先
我们常说,python2 是深度优先,python3 是广度优先, 其实具体来说是 python2.2 及其以前是深度优先 python2.3及其以后就是广度优先了 python官网 讲解1 以及su ...
- Qt的action控件中采用默认绑定，没有connect显示绑定！！！
使用qt创建界面时,可以选用代码设计也可以选用qt design来设计.最近看我同事的代码,以前写action都是使用connect链接槽函数的, 网上大多数人都是这样,然后我就纳闷,怎么没有conn ...
- Windows 10 显示中的仅更改文本大小和加粗选项
问题描述: 在Windows 10 1703 之前的版本,在控制面板-显示中,存在如下图中的图形界面设置: 系统升级到Windows 10 1703 或是Windows 10 1709 之后,不再存在 ...
- windows的cmd下面格式化某个盘符
1.crl+R 输入cmd回车. 2.如果要格式化的是E盘,哪直接输入 在DOS窗口中输入“format f: “ ,其中:format 为格式化命令,f: 为需要格式化的分区
- 关于WPS查看PDF文件操作问题
自己一直使用WPS打开PDF类的文档,但是使用过程中,存在下面的几个问题: pdf 如何查看当前页码pdf 如何根据目录跳转到指定页WPS 查看pdf 如何跳转到指定页 后来百度后,可以考虑将PDF转 ...
- SpringJDBC数据库的基本使用
SpringJDBC的基础使用部分内容 云笔记项目数据库部分采用的是Spring-MyBatis,前面学过了JDBC,SpringJDBC,Mybatis和Spring-MyBatis,有必要重新复习 ...
- Java中构造函数传参数在基本数据类型和引用类型之间的区别
Java中构造函数传参数在基本数据类型和引用类型的区别 如果构造函数中穿的参数为基本数据类型,如果在函数中没有返回值,在调用的时候不会发生改变:而如果是引用类型,改变的是存储的位置,所有不管有没有返回 ...
- LINUX 设置 backspace为删除键
描述 :在linux/unix平台上的 sqlplus中,如果输错了字符,要想删除,习惯性的按下backspace键后,发现非但没有删除想要删掉的字符,还多出了两个字符^H. 原因:由于终端默认ctr ...
- SQLMAP自动注入（二）
--data 添加post头 --data 添加get头 --cookie 添加cookie 设置探测级别大于等于2时会探测cookie是否有注入点 --random-agent 随机生成user-a ...
- JMeter学习（八）JDBC测试计划－连接Oracle（转载）
转载自 http://www.cnblogs.com/yangxia-test 一.测试环境准备 Oracle:10g JDBC驱动:classes12.jar oracle安装目录下(orac ...