1.JDBC练习题
- 采用Java Script编写一个9*9乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9*9乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
for(var i=1; i<=9; i++){
document.write("<tr>")
for (var j=1; j<=i;j++){
document.write("<td>")
document.write(i+"*"+j+"="+i*j);
document.write("</td>")
}
document.write("<tr>")
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
2. 采用dom对象，做一个开关灯的效果，这里涉及到了绑定单击事件以及修改属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关灯</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
var light = document.getElementById("light");
var flag = false;
light.onclick = function () {
flag = !flag;
if(flag){
light.src="img/on.gif";
}else {
light.src="img/off.gif";
}
}
</script>
</body>
</html>
- 设置一个轮播图程序，可以完成每三秒种自动切换图片，这里涉及到了修改属性值以及设置循环定时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
var item = 1;
function fun() {
item++;
if(item>3){
item=1;
}
var image = document.getElementById("image");
image.src="img/banner_"+item+".jpg";
}
setInterval(fun,3000);
</script>
</head>
<body>
<img src="img/banner_1.jpg"id="image">
</body>
</html>
- 这里涉及到了采用BOM中的location对象进行链接的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
var time = document.getElementById("time");
var second = 5;
function fun() {
second--;
if(second<0){
location.href="https://www.baidu.com";
time.innerHTML=0+"";
}else{
time.innerHTML=second+"";
}
}
setInterval(fun,1000);
</script>
</body>
</html>
- 写一个动态表格，可以自动添加数据、删除数据
1）首先写出一个表格，把样式都给设置好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格1</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr><tr>
<td>2</td>
<td>张无忌</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr><tr>
<td>3</td>
<td>周芷若</td>
<td>女</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</div>
</body>
</html>
效果如下：
接着就开始写我们的JS语句，首先我们先采用document对象来进行实现：
<script>
//为添加按钮设置一个事件响应
document.getElementById("btn_add").onclick=function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//创建td Dom对象
var td_id = document.createElement("td");
//创建文本节点
var text_id = document.createTextNode(id);
//将id文本放进td中去
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//创建最后一个超链接文本
var td_a = document.createElement("td");
//创建一个插连接Dom对象
var els_a = document.createElement("a");
els_a.setAttribute("href","javascript:void(0);");
var text_a = document.createTextNode("删除");
els_a.appendChild(text_a);
td_a.appendChild(els_a);
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//获取表格对象，由于获取的是一个对象数组，所以要用下标
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
写完需要在每个 < a > 标签中添加点击事件：οnclick=“delTr(this);”
这样做十分麻烦，主要就是要不断创建其他DOM对象，然后一层层进行添加，然而我们如果使用innerHTML就简单很多：
document.getElementById("btn_add").onclick=function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var table = document.getElementsByTagName("table")[0];
table.innerHTML += "<tr>\n" +
"<td>" + id + "</td>\n" +
"<td>"+name+"</td>\n" +
"<td>"+gender+"</td>\n" +
"<td><a href=\"#\" οnclick=\"delTr(this)\">删除</a></td>\n" +
"</tr>"
}
我们只需将上面的一行的html代码给直接粘贴过来修改对应的内容即可。
- 设置一个表格选中的功能，要求表格可以全选，反选，单选，以及移动到某一行有固定的效果。
首先我们还是把先关的HTML和CSS设置好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
效果如下图：
接着我们开始对每个按钮设置响应的单击事件，注意这里，为了让以后我们的JS语句能够较为固定的出现在一个位置，所以我们可以采用window.onload = function(){}来使所有页面加载完后才绑定事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("selectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i<cbs.length; i++){
cbs[i].checked = true;
}
}
document.getElementById("unSelectAll").onclick=function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i<cbs.length; i++){
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick=function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i<cbs.length; i++){
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function () {
//这里弹出的就是cb对象
//alert(this)
var cbs = document.getElementsByName("cb");
//确保每一个cb都和第一个cd状态一样
for (var i = 0; i<cbs.length; i++){
cbs[i].checked = this.checked;
}
}
var trs = document.getElementsByTagName("tr");
for (var i = 0; i<trs.length;i++){
trs[i].onmouseover = function () {
this.className = "over";
}
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
- 写一个用户注册的页面，要求在写上用户名后马上进行校验并提示正确与否，密码也是一样，最后提交的时候同样需要校验。
首先还是写一个界面出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.error{
color:red;
}
#td_sub{
padding-left: 150px;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
效果如图：
然后我们给添加三个事件，两个鼠标离焦事件，一个单击事件
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
return checkUsername() && checkPassword();
}
//给用户名和密码分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
function checkUsername() {
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'>"
}else {
s_username.innerHTML = "输入异常";
}
return flag;
}
function checkPassword() {
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'>"
}else {
s_password.innerHTML = "输入异常";
}
return flag;
}
</script>
2.Bootstrap入门
- 这里首先是一个Bootstrap的固定模板，是直接从它的手册上复制下来的一段代码，然后删除一些不必要的东西就形成了以下的内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
之后我们对< head>标签中已经存在的内容就不再进行修改了，直接用就行，这就是一个固定的模板。
2. 接着就是栅格系统来进行响应式布局是Bootstrap的一个显著特点，所谓响应式布局可以参考苹果的首页。在一个台式机的显示屏上，其首页是这样的：
然而当我们将浏览器页面就行缩小，就会发现图片显示发生了变化，而且上面的导航栏变成了汉堡按钮：
这就是响应式布局，可以根据你显示器大小的变化来切换显示的样式。
栅格系统就是将一行给分成了12个格子，可以指定对应元素占格子的多少，具体程序如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style>
.box{
border: red solid 1px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div><div class="col-lg-1 box col-sm-2">
栅格
</div>
</div>
</div>
</body>
</html>
这样我们在电脑显示器上看是这样的：
然而在平板显示器上看是两行，如下：
一共有以下几种设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
注意事项如下：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
- 之后就是我们需要什么组件直接去Bootstrap的使用手册里去找就行了。
3.XML
至于XML没有什么好说的，主要就是要记清楚几个对象的获取方式以及另外两种查询方式，具体的语法可以等用到的时候再反过来看。
扫一扫
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
