JavaScript 练习
搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()"> <script> function Focus(){ var input=document.getElementById("ID1");
if (input.value=="请输入用户名"){
input.value="";
}
} function Blurs(){ var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){
ele.value="请输入用户名";
}
} </script> </body>
</html>
搜索框
正反选练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr> </table> <script>
function selectAll(){
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=true;
}
} function cancel(){
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
input.checked=false;
}
} function reverse(){
var inputs=document.getElementsByTagName('input');
for (var i=0;i<inputs.length;i++){
var input=inputs[i];
//input.checked=!input.checked
if(input.checked){
input.checked=false
}else{
input.checked=true
} }
}
</script> </body>
</html>
正反选
二级联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.select {
width: 100px;
height: 30px;
}
</style>
</head>
<body> <select name="" id="provinces" class="select">
<option value="">请选择省份</option>
</select> <select name="" id="city" class="select">
<option value="">请选择城市</option>
</select> <script>
data={'河北':['廊坊','石家庄','保定','山海关','雄县'], '山西':['晋城','大同','太原','阳泉'], '辽宁':['沈阳','大连','鞍山','开源','锦州','葫芦岛','阜新']};
// console.log(data);
// console.log(typeof(data)); var pro_ele = document.getElementById('provinces');
var city_ele = document.getElementById('city'); for (var i in data){
var ele = document.createElement('option');
ele.innerHTML=i;
pro_ele.appendChild(ele)
} pro_ele.onchange=function () {
console.log(this.options[this.selectedIndex]);
var citys=data[this.options[this.selectedIndex].innerHTML]; city_ele.options.length=1;
for (i=0;i<citys.length;i++){
var ele=document.createElement('option');
ele.innerHTML=citys[i];
city_ele.appendChild(ele);
}
}
</script> </body>
</html>
二级联动
模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: transparent;
height: 2000px;
}
.head-right {
right: 0px;
margin: 19px 0 5px;
display: inline-block;
position: absolute;
color: #fff;
padding: 0 96px 0 0;
}
.mnav{
color: #333;
float:left;
font-weight: 700;
line-height: 24px;
margin-left: 20px;
font-size: 13px;
text-decoration: underline;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: rgba(12, 14, 23, 0.58);
opacity: 0.4;
} .hide{
display: none;
}
#gd{
display: inline-block;
position: absolute;
right: 10px;
width: 60px;
height: 23px;
color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
overflow: hidden;
border-bottom: 1px solid #38f;
margin-left: 19px;
margin-right: 2px;
text-decoration: none; }
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -200px;
height:400px;
width: 350px;
background-color: white; }
.models-dl1{
height: 30px;
margin-bottom: 1px;
}
#ID2{
width: 32px;
height: 30px;
right: 16px;
top: 30px;
float: right;
padding-right: 10px; }
.models-dl2{
text-align: center;
margin-top: 100px;
}
.models-dl3{
text-align: center;
margin-top: 20px;
}
.models-dl4{
text-align: center;
margin-top: 100px;
}
.models-dl44-2{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="back">
<div class="head-right">
<a href="#" class="mnav">新闻</a>
<a href="#" class="mnav">hao123</a>
<a href="#" class="mnav">地图</a>
<a href="#" class="mnav">视频</a>
<a href="#" class="mnav">贴吧</a>
<a href="#" class="mnav">学术</a>
<a href="#" class="mnav" onclick="action('show')">登陆</a>
<a href="#" class="mnav">设置</a>
<a href="#" id='gd' class="mnav">更多产品</a>
</div>
</div> <div class="shade hide"></div>
<div class="models hide">
<div class="models-dl1">
<a id="ID2" type="button" value="cancel" onclick="action('hide')">取消</a>
</div>
<div class='models-dl2' >
用户名<input type="text" value="用户名">
</div>
<div class='models-dl3' >
密   码 <input type="text" class='dl' value="密码">
</div>
<div class='models-dl4' >
<a href="#" class="models-dl44-2">登陆</a>
<a href="#" class="models-dl44-2">注册</a>
</div> </div> <script>
function action(act){
var ele=document.getElementsByClassName("shade")[0];
var ele2=document.getElementsByClassName("models")[0];
if(act=="show"){
ele.classList.remove("hide");
ele2.classList.remove("hide");
}else {
ele.classList.add("hide");
ele2.classList.add("hide");
}
}
</script>
</body>
</html>
模态对话框
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
width: 590px;
height: 470px;
margin: 80px auto;
position: relative;
} .img li {
position: absolute;
list-style: none;
top: 0;
left: 0;
} .num {
position: absolute;
bottom: 18px;
left: 180px;
list-style: none;
} .num li {
display: inline-block;
text-align: center;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
line-height: 18px;
margin-left: 8px;
} .btn {
top: 50%;
position: absolute;
display: none;
background-color: lightgray;
width: 30px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 30px;
margin-top: -30px;
opacity: 0.7%;
} .left {
left: 0;
} .right {
right: 0;
} .outer:hover .btn{
display: inline-block;
} .num .active {
background-color: red;
}
</style>
</head>
<body> <div class="outer">
<ul class="img">
<li><a href=""><img src="data:images/1.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/2.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/3.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/4.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/5.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/6.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/7.jpg" alt=""></a></li>
</ul> <ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul> <div class="left btn"> < </div>
<div class="right btn"> > </div>
</div> <script src="jquery-3.3.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签
var img_num = $(".img li").length; for (var j=0;j<img_num;j++){
$(".num").append("<li>")
}
$(".num li").eq(0).addClass('active'); // 手动轮播
$(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
}); // 自动轮播
var c=setInterval(GO_L, 1500); function GO_R() {
if (i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass('active').siblings().removeClass('active');
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
} function GO_L() {
if (i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass('active').siblings().removeClass('active');
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
}
$(".outer").hover()(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R, 1500)
}); // button 加定播
$(".left").click(GO_L);
$(".right").click(GO_G); </script>
</body>
</html>
轮播图
JavaScript 练习的更多相关文章
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Debian系列Linux的隐藏WiFi
Debian系列Linux共用相同的deb安装包,拥有大量的各种软件,是Linux里面最主要的生态系.包括Ubuntu及其衍生版本如Lubuntu/Mate/Kubuntu等,在ARM上也有很好的支持 ...
- bug大致分类及如何定位
前端 一.概念:网站的静态页面设计,网站前端工作使用的是html.css.javascript等技术设计网站页面的样式和排版布局,这就是网站前端. 二.Bug类别 1.HTML:出现文本的问题基本都是 ...
- 关于linux中的目录配置标准以及文件基本信息
关于Linux中的目录配置标准 在查看docker.k8的运行日志,修改相关的运行记录的时候,学长总是能很快地找到目录,这个多多少少和Linux的FHS(File Hierarchy Standard ...
- (已实践)PLSQL本地还原Oracle数据库dmp文件
这个方法很烂,导致重装Oracle时候处处出现问题,不建议使用这个方法,除非你以后不再用Oracle这个软件了,这个方法很烂,再评论一下. 第一,启动服务,(如果数据库处于启动状态,那么略过这一步) ...
- SpringMVC访问映射的jsp文件时，报404错误
配置文件中需要配置映射自然不必多说 <bean class="org.springframework.web.servlet.view.InternalResourceViewReso ...
- 深入IO 想学必看！受益匪浅哦~
一:IO流概述 IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间的数据传输,Java对于数据的操作都是通过流实现,而Java用于操作流的对象都在IO包中. 分类: 按操作数据 ...
- Linux菜狗入门(不停更新)
资料来源:<腾讯课堂> 1, 计算机硬件包括CPU,内存,硬盘,声卡等等 2, 没有安装操作系统的计算机,通常被称为裸机 如果想在裸机上运行自己所编写的程序,就必须用机器语言书写程序 如果 ...
- seajs与requirejs
1 seajs暴露的两个对象 二 define()定义 引用模块 三插件 css插件和requirejs插件 4 seajs使用和建议
- Kali Linux安装及中文指南
Kali Linux安装及中文指南 Kali Linux安装教程:https://blog.csdn.net/u012318074/article/details/71601382 Kali Linu ...
- LOCK - 明确地锁定一个表
SYNOPSIS LOCK [ TABLE ] name [, ...] [ IN lockmode MODE ] where lockmode is one of: ACCESS SHARE | R ...