javascript小练手
1、做一个小图标在界面中通过按钮可以变大 变小 变色 变圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变图片</title>
<style>
.box{//设置显示的盒子的属性
width:100px;
height:100px;
background-color: red;
}
button{//设置你的按钮的属性
width:20px;
height:20px;
font-size: 5px;
/*background-color: green;*/
}
</style>
</head>
<body>
<button type="button" id="big">变大</button>
<button type="button" id="small">变小</button>
<button type="button" id="changeColor">变色</button>
<button type="button" id="circle">变圆</button> <div class="box" id="hezi"></div>
<script type="text/javascript">
window.onload = function(){
function $(id){ //把获取id封装成一个函数
return document.getElementById(id);
}
$('big').onclick = function(){//id为big的那个按钮对盒子进行操作
$('hezi').style.width = '300px';
$('hezi').style.height = '400px';
}
$('small').onclick = function(){
$('hezi').style.width = '50px';
$('hezi').style.height = '50px';
}
$('changeColor').onclick = function(){
// $('hezi').style.color = 'yellow'; //错误的写法 你上面定义的是background这也应该是background
$('hezi').style.backgroundColor = 'yellow';
}
$('circle').onclick = function(){
$('hezi').style.borderRadius = '50%'; //变圆就是设置成50%
}
}
</script>
</body>
</html>
改变一个界面中的盒子大小颜色
2、当你的鼠标移动到一个图片上的时候会替换成另外一个图片 当移走的时候又会变成另外一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换界面图片</title>
</head>
<body>
<div class="box">
<img src="./2_01.png" alt="照相机" id="ca" title="哈哈哈"> </div>
<script>
window.onload = function(){
var oImg = document.getElementById('ca');
oImg.onmouseover = function(){
oImg.src = './2_02.png';
var myDate = new Date();
// console.log(myDate.toLocaleString());
// oImg.title = myDate.toLocaleString();
console.log(myDate.toLocaleString());
oImg.title = myDate.toLocaleString();
}
oImg.onmouseout = function(){
oImg.src = './2_01.png';
} }
</script> </body>
</html>
变换图片
3、实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
} .box{
width:500px;
height:90px;
margin:100px auto;
background-color: rgba(0,0,0,0.2);
position:relative;
}
.car{/*这个是购物车的顶部显示的位置*/
width:150px;
height:30px;
background-color: #fff;
position: absolute; /*父相子绝 定位*/
left:200px;
top:3px;
z-index:9;
}
.shop{/*下部的大的空白部分*/
width:301px;
height:70px;
background-color: #fff;
position:absolute;
top:33px;
left:40px;
border:1px solid green;
display: none; /*先不显示这个盒子马上放在javascript来控制显示*/
div .c{
border-bottom-width:0;
}
div .t{
border:1px solid green;
}
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的购物车</div> <!--上面的头部-->
<div class="shop t" id="shop" ></div><!--下面的大体-->
</div> <script type="text/javascript">
window.onload = function(){
let myCar = document.getElementById('myCar');
var shop = document.getElementById('shop'); myCar.onmouseenter = function(e){//onmouseenter 防止有冒泡现象 因为有 冒泡的话点击其他的也会有反应 // 阻止默认事件 a标签的默认事件
// e.preventDefault() // 阻止冒泡
// e.stopPropagation();
shop.style.display = 'block'; //这个是你的鼠标停留的时候就显示出来这个块 上面已经设置这个块不显示了
myCar.className +="c"; //创建一个类名并且加上这个类 因为上面设置了这个类的信息你要加上这个类名
}
myCar.onmouseleave = function(){//当你的鼠标离开的时候
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
myCar.parentNode.onmouseenter = function(){
console.log(111);
}
myCar.parentNode.parentNode.onmouseenter = function(){
// alert(222);
console.log(222);
} </script>
/
</body>
</html>
购物车
4、 建立一个模态框
建立一个点击叉号就显示 然后再点击插好就退出的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff; }
</style>
</head>
<body>
<button id="btn">弹出</button> <script>
window.onload = function(){
var oBtn = document.getElementById('btn');
//创建模态框
let oDiv = document.createElement('div'); var oP = document.createElement('p');
var oSpan = document.createElement('span'); //设置属性
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerText = '模态框弹出';
oSpan.innerText = 'X'; //追加元素
oDiv.appendChild(oP); oP.appendChild(oSpan); //上面是创造一个块 div 然后再创造一个p标签 和一个span标签对这些标签规划一些属性 然后把span标签 加入p标签内 p再加入span标签内
oBtn .onclick = function(){
this.parentNode.insertBefore(oDiv,oBtn); //当点击的时候把你创建的这个内容给插入进去 显示出来
}
oSpan.onclick = function(){
//移除你显示的那个模块 移除oDiv
oDiv.parentNode.removeChild(oDiv)
} } </script> </body>
</html>
模态框
5、用javascript来模拟一个a标签的块内换颜色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button> <script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类） var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ // 要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
} //鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
} </script> </body> </html>
模拟a标签块级换颜色
6、tab栏选项卡
就是你的中心内容会跟着你选择的点击而改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
} ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block; } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p> </div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 // 预解释 变量提升
// var a;
// console.log(a); // {
// a = 1;
// }
// console.log(a); var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p') // js的一个坑
for(let i = 0; i < tabli.length; i++){
// 绑定索引值（新增一个自定义属性：index属性）
// tabli[i].index = i;
tabli[i].onclick = function(){ // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
console.log(i);
tabContent[i].className = 'active';//【重要代码】
}
}
} </script>
</html>
tab选项卡
javascript小练手的更多相关文章
- 小练手：用HTML5 Canvas绘制谢尔宾斯基三角形
文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...
- 微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作
香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...
- 微信小程序框架分析小练手（二）——天气微信小程序制作
简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...
- 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
- python 小练手
监控 主动监控 - 服务器端轮询客户端 被动监控-客户端agent上报到服务器端 混合模式---两种都支持 需求 1个性化的监控需求 2每个服务的监控间隔不同 3混合模式的监控
- python小练手题1
1. """ Write a program which can compute the factorial of a given numbers. The result ...
- 微信小程序框架分析小练手（一）——猫眼电影底部标签导航制作
旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...
- 微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器（一）
内容: 一.前言 二.相关概念 三.开始工作 四.启动项目起来 五.项目结构 六.设计理念 七.路由 八.部署线上后端服务 同步交流学习社区: https://www.mwcxs.top/page/4 ...
- 初始Spring MVC——练手小项目
初始Spring MVC 前几天开始了我的spring学习之旅,由于之前使用过MVC模式来做项目,所以我先下手的是 Spring MVC,做个练手项目,非常简单 项目介绍: 用户输入信息 -> ...
随机推荐
- (转)python time模块和datetime模块详解
python time模块和datetime模块详解 原文:http://www.cnblogs.com/tkqasn/p/6001134.html 一.time模块 time模块中时间表现的格式主要 ...
- 关于Stream的Read方法
一次做到一个关于使用DataContractJsonSerializer类的表述.其中需要用到MemoryStream数组读取.发生数组溢出错误,这里特记录一笔: public static clas ...
- Java的IO输入输出流类的介绍(有图)
一.字节流 1.InputStream/OutputStream(输入流与输出流几乎一一对应) 读取的方法 int read() int read(byte[] buffer) int r ...
- html的img标签
html显示图片 1.最简单: <img src="图片路径"/> 2.如果要改变图片显示的尺寸 <img src="图片路径" width= ...
- Struts2页面配置和访问servlet API
一.Struts2页面配置 在struts2中页面可以分为两种,全局页面和局部页面. 1.全局页面: 在一个<package></package>标签内的多个action都要跳 ...
- Hibernate项目环境搭建
1.首先在eclipse里面新建一个Java工程. 2.在数据库中新建一个数据库(无需创建表,有Hibernate生成). 3.在项目中导入Hibernate所依赖的jar包,该jar包可以在此下载: ...
- React项目的打包
1.create-react-app 来自Facebook官方的零配置命令行工具.create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+E ...
- Java通过流对MP4视频文件进行加密，H5 video播放流
加密目标文件 代码如下: 不建议进行二次加密,若二次加密必须要二次解密 package com.xgt.util; import java.io.*; public class VideoEncode ...
- [转]AngularJS 实现 Table的一些操作(示例大于实际)
本文转自:http://www.cnblogs.com/lin-js/p/linJS.html <!DOCTYPE html> <html> <head> < ...
- centos下不重装php——给PHP添加新扩展库
装完php.发现需要一些新扩展库比如常见的mysqli之类的.在不重装php安装新扩展,以一个不常用的库xsl为例. 环境:centos6.8,php5.3.29 ,osx10.11.6 我的php相 ...