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的动 ...
随机推荐
- DJ Java Decompiler
With DJ Java Decompiler you can decompile java class-files and save it in text or other format. It's ...
- react-native start error Invalid regular expression:
详细错误: error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\]. ...
- gts测试流程
测试目的: 用于检测你做的Android gms包是否满足兼容性要求,通俗点说,gms包,就是Google自己的apk,提供基础服务,例如YouTube.playstore等. 测试前提: 1.发货u ...
- Java中关于Date等日期类的简单使用
Date Date类不常用,很多方法被废弃了,常用它的两个构造方法来new一个Date对象. Date d1 = new Date(); //不传任何参数,代表当前时间点 System.out.pri ...
- Vue-3D-Model：用简单的方式来展示三维模型
为什么做这个组件 我经常听到前端朋友们抱怨,在网页上展示三维模型太麻烦了.但是这方面的需求又有很多,例如做房地产的需要展示户型.卖汽车的需要展示汽车模型等. 在网页上展示三维模型就只能用WebGL技术 ...
- [转帖]kafka入门：简介、使用场景、设计原理、主要配置及集群搭建
kafka入门:简介.使用场景.设计原理.主要配置及集群搭建 http://www.aboutyun.com/thread-9341-1-1.html 还没看完 感觉挺好的. 问题导读: 1.zook ...
- sprintf()函数可能发生的错误
接收到如下数据: GET http://app.tdvpn.com/heartbeat?mac=898607B81017AT+CIPSTATUS? &status=/ HTTP/1.1 Hos ...
- MySQL-快速入门（4）MySQL函数
1.函数包括:数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数. 2.数学函数:绝对值函数.三角函数(正弦函数.余弦函数.正切函数.余切函数等).对数函数.随机数函数. 1& ...
- [2019沈阳网络赛D题]Dawn-K's water(点分治)
题目链接 题意为求出树上任意点对的距离对3取余的和. 比赛上听到题意就知道是点分治了,但是越写越不对劲,交之前就觉得会T,果不其然T了.修修改改结果队友写了发dp直接就过了Orz. 赛后想了想维护的东 ...
- Django 调试models 输出的SQL语句 定位查看结果
django 调试models变得更为简单了,不用像之前的版本, 手工去调用django query, 才能打印出之前的代码是执行的什么SQL语句. 1.3开始只需在settings.py里,配置如下 ...