jsvascript篮球梦
首先让我们先欣赏一下效果图:
html文本：
<div class="box">
<img id="imgshow" src="lanqiu/1.jpg" alt="">
<input type="button" value="下一张" id="btnNext">
第<span id="zeyu">1</span>张
<input type="button" value="上一张" id="btnLaxt">
</div>css样式：
body{
margin:0;
background:url(zeyu.jpg);
background-size: 100%;
}
.box{
width:320px;
height:520px;
margin:100px auto;
}
img{
width:320px;
height:480px;
}
input{
width:100px;
height: 40px;
margin-left:20px;
}
span{
color: #f00;
font-size: 25px;
}
JS:
var index=1;
document.getElementById("btnNext").onclick=function(){
if(index<19){
index++;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
document.getElementById("btnLaxt").onclick=function(){
if(index>1){
index--;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>篮球图集</title>
<style>
body{
margin:0;
background:url(zeyu.jpg);
background-size: 100%;
}
.box{
width:320px;
height:520px;
margin:100px auto;
}
img{
width:320px;
height:480px;
}
input{
width:100px;
height: 40px;
margin-left:20px;
}
span{
color: #f00;
font-size: 25px;
}
</style>
</head>
<body>
<div class="box">
<img id="imgshow" src="lanqiu/1.jpg" alt="">
<input type="button" value="下一张" id="btnNext">
第<span id="zeyu">1</span>张
<input type="button" value="上一张" id="btnLaxt">
</div>
<script>
var index=1;
document.getElementById("btnNext").onclick=function(){
if(index<19){
index++;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
document.getElementById("btnLaxt").onclick=function(){
if(index>1){
index--;
}
document.getElementById("zeyu").innerHTML=index;
document.getElementById("imgshow").src="lanqiu/"+index+".jpg";
}
</script>
</body>
</html>
持续更新，欢迎大家指教！
jsvascript篮球梦的更多相关文章
- HDU--杭电--4504--威威猫系列故事——篮球梦--DP
威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total ...
- HDUOJ----4504 威威猫系列故事——篮球梦
威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- HDU 4504 威威猫系列故事——篮球梦（dp）
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 中文都看得懂.不过我是看hint才正确理解什么意思的.开始的时候理解错了. 解题思路: 给定时 ...
- 【HDOJ】4504 威威猫系列故事——篮球梦
水题. #include <cstdio> #include <cstdlib> #include <cstring> #define MAXN 25 ]; voi ...
- hdu 4504 威威猫系列故事——篮球梦_简单dp
题目链接 题意:你现在分数为a,对方分数为b,你比赛还有n分钟,每次进攻需要15分钟,现在你先进攻,每次进攻可以得1或2或3,对方每次进攻得一分,问超过对方分数有多少种打法 思路:因为情况太多要用__ ...
- 2013腾讯编程马拉松初赛第〇场（HDU 4504）威威猫系列故事——篮球梦
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 篮球赛假如我们现在已经知道当前比分 A:B,A代表我方的比分,B代表对方的比分,现在比赛还剩下 ...
- NSIS
NSIS 是“Nullsoft 脚本安装系统”(Nullsoft Scriptable Installation System) 的缩写,它是一个免费的 Win32 安装.卸载系统,采用了简洁高效的脚 ...
- hdu4504java
import java.util.*; class Main{ public static void main(String[] args) { Scanner cin=new Scanner( ...
- ZT I Believe I Can Fly(我相信我能飞）
I Believe I Can Fly(我相信我能飞) 歌手:R. Kelly(罗 凯利) 歌词部分 I used to think that I could not go on 我原以为我无法坚持下 ...
随机推荐
- poj-3259 Wormholes（无向、负权、最短路之负环判断）
http://poj.org/problem?id=3259 Description While exploring his many farms, Farmer John has discovere ...
- D. Array Splitting(后缀数组）
You are given an array
- windows下使用apache相关资料汇总
1.Apache httpd.conf配置详解 https://www.cnblogs.com/langren1992/p/5160912.html 2.windows下使用apache经验总结 ht ...
- JDK5.0 Annotation学习笔记(一)
背景知识: 从JDK5开始提供名为Annotation(注释)的功能,它被定义为JSR-175规范.注释是以"@注释名"在代码中存在的,还可以添加一些参数值,例如: ...
- 动态添加checkbox
<!--动态添加 checkbox--> <script type="text/javascript"> var data = new Array(); & ...
- Leetcode13_罗马数字转整数
题目 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1. ...
- Python与数据库
链接汇总 https://www.cnblogs.com/stacklike/category/1134822.html Python与数据库[1] -> 数据库接口/DB-API[0] -&g ...
- Spring+Mybais整合
简单的来说,Spring主要用于在业务层(当然spring也有数据库交互的模块,个人觉得spring在这方面有一点不如mybatis),而mybatis主要用于数据持久化,在一个完整的项目中无论是业务 ...
- 为什么jdk1.8 HashMap的容量一定要是2的n次幂
一.jdk1.8中,对“HashMap的容量一定要是2的n次幂”做了严格控制 1.默认初始容量: [Java] 纯文本查看 复制代码 ? 1 2 3 4 /** * The default init ...
- OpenCV 输入输出XML和YAML文件
#include <opencv2/core/core.hpp> #include <iostream> #include <string> using names ...