JavaScript部分案例
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学。
阅读本教程,您需要有以下基础:
PS :JavaScript 一直在升级,请等待
01、电灯的开关
<img id="light" src="img/off.gif">
<script>
/*
1、获取图片对象
2、绑定点击事件
3、切换图片
使用flag标注状态
* */
var element = document.getElementById("light");
var flag = false;//关闭状态 element.onclick = function (ev) {
if(flag){//如果灯开着
element.src = "img/off.gif";
flag = false;
}else{
element.src = "img/on.gif";
flag = true;
}
}
</script> 02、设置时间弹出链接
<p>
<span id="time">5</span>之后跳转
</p>
<script>
var data = 5;
function fun(){
data--;
if(data<=0){
location.href="https://www.sina.cn";
}
time.innerHTML = data;
}
setInterval(fun,1000);
</script>
03、轮播图
<img src="img/img/banner_1.jpg" id="img" width="100%" />
<script>
var number =1;
function fun(){
number++;
if(number>3){
number=1;
}
var img =document.getElementById("img");
img.src="img/img/banner_"+number+".jpg";
}
setInterval(fun,3000);
</script> 04.多级联动
<option value="sc">四川</option>
<option value="cq">重庆</option>
<option value="gd">广东</option>
</select>
<option>成都</option>
<option>德阳</option>
<option>绵阳</option>
</select>
<script>
var pro = document.getElementById("pro");
var city = document.getElementById("city");
function choice() {
var _pro = pro.value
switch (_pro) {
case "sc":
city.innerHTML = "<option>成都</option>\n" +
" <option>德阳</option>\n" +
" <option>绵阳</option>"
break;
case "cq":
city.innerHTML = "<option>重庆</option>";
break;
case "gd":
city.innerHTML = "<option>广州</option>\n" +
" <option>深圳</option>\n" +
" <option>东莞</option>"
break;
}
}
</script>
05.动态表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
table {
border: 1px solid;
margin: auto;
width: 500px;
text-align: center;
border: 1px solid;
text-align: center;
margin: 50px;
}
</style>
<body>
<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">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
/* // 1、获取按钮
document.getElementById("btn_add").onclick =function () {
//2、获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
}*/
document.getElementById("btn_add").onclick = function () {
//2、获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3、 获取table
var table = document.getElementsByTagName("table")[0];
// 4、追加一行
table.innerHTML+="<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
background-color: white;
}
.over{
background-color: pink;
}
</style>
/*
1.全选:
获取所有的checkbox
遍历cb,设置每一个cb的状态为选中 checked
2.全不选
获取所有的checkbox
遍历cb,设置每一个cb的状态为选不中
3.反选
获取所有的checkbox
遍历cb,设置每一个cb的状态取反
*/
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;
}
};
}
<body>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<td><input type="checkbox" name="cb" ></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</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>
<!--<input type="checkbox" name="cb" id="firstCb" />
<input type="checkbox" name="cb" id="SecondCb" />
<input type="checkbox" name="cb" id="ThirdCb" />-->
<div>
<input type="button" id="selectAll" value="全选" />
<input type="button" id="unSelectAll" value="全不选" />
<input type="button" id="selectRev" value="反选" />
<script>
var selectAll =document.getElementById("selectAll");
var cbs =document.getElementsByName("cb");
selectAll.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = true;
}
}
var unSelectAll =document.getElementById("unSelectAll");
var cbs =document.getElementsByName("cb");
unSelectAll.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = false;
}
}
var selectRev=document.getElementById("selectRev");
var cbs =document.getElementsByName("cb");
selectRev.onclick=function(){
for (var i=0;i<cbs.length;i++) {
cbs[i].checked = !cbs[i].checked;
}
}
</script>
</div>
</body>
</html>
07.输出时间 <script>
var myDate =new Date();
var year =myDate.getFullYear();
var month =myDate.getMonth()+1;
var day =myDate.getDate();
var hour =myDate.getHours();
var min =myDate.getMinutes();
var second = myDate.getSeconds();
//如果为单数时,在前面补0
year = year < 10 ? "0" :year;
month =month <10 ? "0" :month;
day =day < 10 ? "0" :day;
hour = hour <10 ? "0" :hour;
min =min <10 ? "0" :min;
second = second <10 ? "0" :second;
//输出时间
document.write(year+"-"+month +"-"+day+"-"+hour+"-"+min+"-"+second);
</script> 08.根据输入的行和列,创建表格
<div> 请输入你想创建的表格: 行:<input type="text" id="row">
列:<input type="text" id="col">
<input type="button" id="creat" value="创建" onclick="creat()">
</div> <div id="div1">
</div>
<script>
function creat() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var div1 = document.getElementById("div1"); var tab = "<table border=‘1‘ cellpadding=‘0‘ cellspacing=‘0‘ style=‘margin: 50px auto‘>";
for (var i = 1; i <= row; i++) {
tab += "<tr>";
for (var j = 1; j <= col; j++) {
tab += "<td style=‘width: 50px;height: 30px;‘>aa</td>";
}
tab += "</tr>";
}
tab += "</table>";
div1.innerHTML = tab;
}
</script> 09.表单验证
<form id="form">
用户名:<input type="text" id="username" name="name" onblur="checkName()">
<span id="sp_name"></span>
<br>
<input type="submit">
</form>
<script>
window.onload = function (ev) {
document.getElementById("form").onsubmit = function (ev1) {
return checkName();
}
}
function checkName() {
var useranme = document.getElementById("username").value;
var sp_name= document.getElementById("sp_name");
var regExp = new RegExp("^.{3,20}$");
if(regExp.test(useranme)){
sp_name.innerHTML = "可以注册";
sp_name.style.color = "green";
return true;
}else{
sp_name.innerHTML = "用户名格式有误";
sp_name.style.color = "red";
return false;
}
}
</script>
JavaScript部分案例的更多相关文章
- JavaScript 入门案例
四. JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
- JavaScript小案例-阶乘!
JavaScript小案例-阶乘! 阶乘:就是像台阶一样一阶一阶的,从高阶到低阶,依次乘下来!代码超少!容易理解! // factorial 阶乘 // 如果 function factorial(n ...
- JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...
- javascript基础案例解析
学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...
- html笔记05:html、css、javascript综合案例
1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...
- javascript 精典案例分析一览
1.[优雅代码]深入浅出 妙用Javascript中apply.call.bind http://www.cnblogs.com/coco1s/p/4833199.html 2.1.0.1 ionic ...
- JavaScript常见案例
一.点灯开关控制: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)
事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
随机推荐
- MySQL基础(五)常见运算符
MySQL常见运算符 运算符连接表达式中各个操作数,其作用是用来指明对操作数所进行的运算.常见的运算有数学计算.比较运算.位运算以及逻辑运算.运用运算符可以更加灵活地使用表中的数据,常见的运算符类型有 ...
- 因果推理的春天-实用HTE(Heterogeneous Treatment Effects)论文github收藏
一直以来机器学习希望解决的一个问题就是'what if',也就是决策指导: 如果我给用户发优惠券用户会留下来么? 如果患者服了这个药血压会降低么? 如果APP增加这个功能会增加用户的使用时长么? 如果 ...
- Python_深拷贝和浅拷贝
深拷贝与浅拷贝 import copy v = 123 v1 = copy.copy(v) #浅拷贝 v2 = copy.deepcopy(v) #深拷贝 **拷贝只拷贝可变数据类型,浅拷贝只拷贝第一 ...
- C++11多线程相关
有关线程的知识,从C++11开始有了一些变化,作为初学者,对其先有个初步认识,后面用到的时候再详细剖析
- MyEclipse10 使用JRebel实现热部署
MyEclipse10 使用JRebel实现热部署 Window --Preferences-Tomcat 6.x-JDK-JVM -noverify -javaagent:D:\JRebel\jre ...
- webshell之一句话木马变形
什么是一句话木马 一句话木马就是只需要一行代码的木马,短短一行代码,就能做到和大马相当的功能.为了绕过waf的检测,一句话木马出现了无数中变形,但本质是不变的:木马的函数执行了我们发送的命令. 我们如 ...
- [Luogu2973][USACO10HOL]赶小猪Driving Out the Piggi…
题目描述 The Cows have constructed a randomized stink bomb for the purpose of driving away the Piggies. ...
- [BZOJ1833][ZJOI2010]数字计数
Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包含一行两个整数a.b,含义如上所述. Output 输出文 ...
- win10下安装openssl
1.下载运行工具:ActivePerl-5.22.1.2201-MSWin32-x64-299574.msi, 安装. 2.执行:perl example.pl,若显示“Hello from Acti ...
- 微信小程序单选/多选框样式重新
/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: ...