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的动 ...
随机推荐
- firewalld无法使用解决
一.安装完Python3.6.5后无法使用firewalld解决 解决:需要把/usr/sbin/firewalld./usr/bin/firewall-cmd 的头部内容改为原来的 pyton2.7 ...
- 正则表达式——Unicode
第 7 章 Unicode 7.1 关于编码 通常,英文编码较为统一,都采用ASCII编码或可以兼容ASCII编码(即编码表的前127位与ASCII编码一直,常见的各种编码,包括Unicode编码 ...
- mysql数据库自带数据库介绍
show databases:查看mysql自带数据库有information_schema,mysql, performance_schema, test information_schema数据库 ...
- 码云与Git的使用
码云注册和使用 网址:https://gitee.com 注册之后新建一个仓库 接下来安装Git 协同开发Git安装与使用 下载地址:https://gitforwindows.org 安装完成之后选 ...
- 基于gulp的前端自动化方案
前言 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...
- liunx驱动----信号量的实现
使用信号量必须包含 <asm/semaphore.h> 头文件.其中相关结构体 struct semaphore 可以通过以下几种方式来声明或者初始化. 1.void sema_in ...
- RF分层测试
这一节来介绍分层的概念,在编写自动化测试时经常会遇到重复的操作,分层的概念就是把重复的操作封装成 “用户关键字”,这样就可以减少冗余. 百度搜索实例 同样以百度搜索为例,当我们多个用例都是使用百度搜索 ...
- readline和xreadline的区别
readline就是直接读取一行 xreadline是生成了一个生成器,遍历的时候才真正生成具体的内容 与range和xrange的区别一样 print range() # 直接创建所有的元素 pri ...
- Java多线程(1)
线程与进程 进程:程序的执行过程 线程:线程共享进程的资源 Java多线程 实现的方式 继承Tread类:使用getName()获取当前线程名 实现Runnable接口:Thread.currentT ...
- Linux上进行常用软件的配置
当拿到一个新的linux服务器的时候一般要经过以下5个配置 修改HOSTANME vi /etc/sysconfig/network 修改HOSTNAME和IP的映射 ...