js-练习题
day01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
input {
width: 300px;
font-size: 16px;
line-height: 18px;
padding:10px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
}
.res {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>计算器</h1>
<hr>
<table>
<tr>
<td>加数1：</td>
<td>
<input type="text" id="num1">
</td>
</tr>
<tr>
<td>加数2：</td>
<td>
<input type="number" id="num2">
</td>
</tr>
<tr>
<td></td>
<td>
<button onclick="add(1)">+</button>
<button onclick="add(2)">-</button>
<button onclick="add(3)">x</button>
<button onclick="add(4)">÷</button>
<button onclick="add(5)">AC</button>
</td>
</tr>
<tr>
<td></td>
<td>
<div class="res" id="box"></div>
</td>
</tr>
</table>
<script>
//定义函数
function add(mode) {
// 获取 用户在 input 中输入的内容
// 获取元素对象 返回对象 对象描述 id是num1的元素
var inputEle1 = document.getElementById('num1');
var inputEle2 = document.getElementById('num2');
//获取用户在input中输入的值
var v1 = inputEle1.value;
var v2 = inputEle2.value;
//判断用户输入是否是纯数字
if (isNaN(v1)) {
alert('加数1必须是纯数字');
return;
}
if (isNaN(v2)) {
alert('加数2必须是纯数字');
return;
}
//把字符串转换为数字
v1 = Number(v1);
v2 = Number(v2);
//两个数操作
switch (mode) {
case 1:
var sum = v1 + v2;
break; //相加
case 2:
var sum = v1 - v2;
break; //相减
case 3:
var sum = v1 * v2;
break; //相乘
case 4:
var sum = v1 / v2;
break; //相除
case 5:
inputEle1.value = '';
inputEle2.value = '';
var sum = '';
break;
}
//获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
var boxEle = document.getElementById('box');
boxEle.innerHTML = sum;
}
</script>
</body>
</html>
day02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出数字</title>
</head>
<body>
<h1>同志交友</h1>
<hr>
<script>
for (var i = 1; i <= 90; i ++) {
//让各位数前面补0
i = i < 10 ? '0'+i : i;
//输出数字
document.write(i, ' ')
//逢10换行
if (i % 10 === 0) {
document.write('<br>');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 50px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
select {
width:100px;
padding:10px;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
}
#res {
margin-top:20px;
}
#res table {
width: 700px;
table-layout: fixed;
border-collapse: collapse;
}
#res td,#res th {
padding: 10px;
border: 1px solid #999;
text-align: center;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
请输入本月多少天:
<input type="number" id="days" max="31" min="28" step="1" value="31">
请输入本月一号星期几:
<select id="weekday">
<option value="0">星期日</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
</select>
<button onclick="makeCalendar()">生成日历</button>
<div id="res"></div>
<script>
//声明函数
function makeCalendar() {
//获取 每月天数
var days = Number(document.getElementById('days').value);
//获取一号是星期几
var weekday = Number(document.getElementById('weekday').value);
//计算日历有多少行
var rows = Math.ceil((days + weekday) / 7);
//定义变量
var html = '<table>';
html += `
<tr>
<th class="red">星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th class="green">星期六</th>
</tr>
`;
var dayNumber = '';
//循环 生成表格
for (var i = 0; i < rows; i ++) {
html += '<tr>';
for (var j = 1; j <= 7; j ++) {
if (j === 1) {
html += '<td class="red">';
} else if (j === 7) {
html += '<td class="green">';
} else {
html += '<td>';
}
dayNumber = j + i*7 - weekday; //计算每个单元格的数值
//判断是否超出范围
if (dayNumber <= 0 || dayNumber > days) {
dayNumber = '';
}
html += dayNumber+'</td>';
}
html += '</tr>';
}
html += '</table>'
//添加表格内容到页面
document.getElementById('res').innerHTML = html;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<style>
input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 30px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
}
#res {
margin-top: 30px;
}
#res table {
table-layout: fixed;
border-collapse: collapse;
}
#res td{
padding: 20px;
}
</style>
</head>
<body>
<h1>表格生成器</h1>
<hr>
请输入表格宽度： <input type="number" id="tableWidth" value="800"> <br>
请输入表格行数： <input type="number" id="tableRows" value="6"> <br>
请输入表格列数： <input type="number" id="tableCols" value="10"> <br>
请输入表格边框： <input type="number" id="tableBorder" value="1"> <br>
<button onclick="makeTable()">生成</button>
<div id="res"></div>
<script>
function makeTable() {
//获取用户输入
var rows = Number(document.getElementById('tableRows').value);
var cols = Number(document.getElementById('tableCols').value);
var width = Number(document.getElementById('tableWidth').value);
var borderWidth = Number(document.getElementById('tableBorder').value);
//循环生成表格
var html = '<table style="width:'+width+'px">';
for (var i = 0; i < rows; i ++) {
html += '<tr>';
for (var j = 0; j < cols; j ++) {
html += '<td style="border:'+borderWidth+'px solid #ccc"></td>';
}
html += '</tr>';
}
html += '</table>';
//把生成的内容添加到页面
document.getElementById('res').innerHTML = html;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
body {
color: #333;
/*color: red;*/
}
table {
width: 900px;
table-layout: fixed;
/*border-collapse: collapse;*/
empty-cells: hide;
}
td {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>九九乘法表</h1>
<hr>
<script>
//JavaScript生成九九乘法表
document.write('<table>');
//循环 输出tr 行
for (var i = 1; i <= 9; i ++) {
document.write('<tr>');
//输出 td 单元格
for (var j = 1; j <= i; j ++) {
document.write(`<td>${i}×${j} = ${i * j}</td>`);
}
document.write('</tr>');
}
document.write('</table>');
document.write('<br><br><br>');
document.write('<table>');
//循环 输出tr 行
for (var i = 9; i >= 1; i --) {
document.write('<tr>');
//输出 td 单元格
for (var j = 1; j <= i; j ++) {
document.write(`<td>${i}×${j} = ${i * j}</td>`);
}
document.write('</tr>');
}
document.write('</table>');
document.write('<br><br><br>');
document.write('<table>');
//循环 输出tr 行
for (var i = 1; i <= 9; i ++) {
document.write('<tr>');
//输出空的单元格
for (var m = 1; m <= (9-i); m ++) {
document.write('<td></td>');
}
//输出 td 单元格
for (var j = 1; j <= i; j ++) {
document.write(`<td>${i}×${j} = ${i * j}</td>`);
}
document.write('</tr>');
}
document.write('</table>');
document.write('<br><br><br>');
document.write('<table>');
//循环 输出tr 行
for (var i = 9; i >= 1; i --) {
document.write('<tr>');
//输出空的单元格
for (var m = 1; m <= (9-i); m ++) {
document.write('<td></td>');
}
//输出 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>
day03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> <style> #box { font-size:60px; margin-top:200px; text-align:center; } </style> </head> <body> <div id="box"></div> <script> //定义一个固定的时间 //倒计时的秒数 var seconds = 3000; runTime(); //调用一下 //定时 var timer = setInterval(runTime, 1000); function runTime(){ //计算包含的小时数 var h = Math.floor(seconds / 3600); var s = seconds - h * 3600; //剩下的秒数 //计算包含的分钟数 var m = Math.floor(s / 60); //计算剩下的秒 s -= m * 60; //给个位数 补0 h = h < 10 ? '0'+h : h; m = m < 10 ? '0'+m : m; s = s < 10 ? '0'+s : s; //拼接字符串 var timeHtml = `距离预产期还有${h}小时${m}分${s}秒`; //判断倒计时结束 if (seconds <= 0) { clearInterval(timer); timeHtml = '生了'; } document.querySelector('#box').innerHTML = timeHtml; seconds --; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> <style> #box { font-size:60px; margin-top:200px; text-align:center; } </style> </head> <body> <div id="box"></div> <script> //定义结束时间 var endDate = new Date('02/05/2019 00:00:00'); //当前的时间 var currDate = new Date(); //倒计时的秒数 var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000); runTime(); //调用一下 //定时 var timer = setInterval(runTime, 1000); function runTime(){ //包含的天数 var d = Math.floor(seconds / (3600 * 24)); var s = seconds - d * 3600 * 24; //计算包含的小时数 var h = Math.floor(s / 3600); s -= h * 3600; //剩下的秒数 //计算包含的分钟数 var m = Math.floor(s / 60); //计算剩下的秒 s -= m * 60; //给个位数 补0 d = d < 10 ? '0'+d : d; h = h < 10 ? '0'+h : h; m = m < 10 ? '0'+m : m; s = s < 10 ? '0'+s : s; //拼接字符串 var timeHtml = `距离过年还有${d}天${h}小时${m}分${s}秒`; //判断倒计时结束 if (seconds <= 0) { clearInterval(timer); timeHtml = '生了'; } document.querySelector('#box').innerHTML = timeHtml; seconds --; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> .outer { margin:200px auto 0px; width: 600px; height: 40px; border: 1px solid #111; } .inner { height: 40px; width: 40%; background: #369; } .progress { margin-top:2px; text-align: center; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> <div class="progress"></div> <script> var innerEle = document.querySelector('.inner'); var proEle = document.querySelector('.progress'); var m = 0; var timer = setInterval(function(){ innerEle.style.width = m+'%'; proEle.innerHTML = m+'%'; if (m >= 100){ clearInterval(timer); return; } m += 1; }, 17) </script> </body> </html>
