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的动 ...
随机推荐
- Zabbix4.0.1使用自带模板监控Linux主机 CPU、内存、硬盘、网卡
环境: 前提已经安装好zabbix服务端.zabbix客户端, zabbix_server端ip和主机名信息: ip:192.168.1.204 hostname: www.test.com ...
- idea中创建maven格式的文件方法
其中新建的maven工程有时候不全或者出一些小问题导致新建类,或者其他文件时候找不到新建的快捷方式,下面就说一种快速设置
- Canvas入门03-绘制弧线和圆
绘制弧线的API: context.arc(centerx:number, centery: number, radius: number, startAngle: number, endAngle: ...
- 不容错过的 MySQL史上最全
点击下方链接 http://c.biancheng.net/view/2361.html
- Tomcat原理剖析
Tomcat原理学习 理解Tomcat工作原理 Tomcat的概念及启动原理浅析 Tomcat系统架构与设计模式
- Java内存结构详解
Java内存结构详解 Java把内存分成:栈内存,堆内存,方法区,本地方法区和寄存器等. 下面分别介绍栈内存,堆内存,方法区各自一些特性: 1.栈内存 (1)一些基本类型的变量和对象的引用变量都是在函 ...
- [BZOJ 4668]冷战(带边权并查集+启发式合并)
[BZOJ 4668]冷战(并查集+启发式合并) 题面 一开始有n个点,动态加边,同时查询u,v最早什么时候联通.强制在线 分析 用并查集维护连通性,每个点x还要另外记录tim[x],表示x什么时间与 ...
- JVM — 性能调优
概念: 一:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创建的.” ...
- how to install protobuff python
当前环境: operate system: Ubuntu 14.04.1 LTS protoc --version: libprotoc 2.5.0 protocol-buffers versi ...
- ThinkPHP中的display()和fetch()的区别
fetch()传入的参数是模板名,用模板文件来输出; display()传入的是字符串,输出传递的内容.