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 我原以为我无法坚持下 ...
随机推荐
- P2486 [SDOI2011]染色 区间合并+树链剖分（加深对线段树的理解）
#include<bits/stdc++.h> using namespace std; ; struct node{ int l,r,cnt,lazy; node(,,,):l(l1), ...
- sequelize 应用hook 实现对分表的访问
https://github.com/cclient/sequelize-shardinghttps://www.npmjs.com/package/sequelize-sharding 实际有效的代 ...
- 浅谈Java中的泛型
泛型是Java自JDK5开始支持的新特性,主要用来保证类型安全.另外泛型也让代码含义更加明确清晰,增加了代码的可读性. 泛型的声明和使用 在类声明时在类名后面声明泛型,比如MyList<T> ...
- 金山wps的面试经历
故事从两个月前开始说起吧. 前段时间突然想跳槽,原因也没啥,就是想折腾下,看看外面的世界?有一部分原因是想离家近一些稳定下来,博主上份工作坐标厦门,风景好的简直随便拍照就是大片. 不废话了,机缘巧合, ...
- 区别 new function(){} 和 function(){}()
只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实 ...
- laravel中用到的ServiceProvide
路由 全局限制 如果你希望路由参数可以总是遵循正则表达式,则可以使用 pattern 方法.你应该在 RouteServiceProvider 的 boot 方法里定义这些模式: 1 2 3 4 5 ...
- python3下scrapy爬虫(第十一卷:scrapy数据存储进mongodb）
说起python爬虫数据存储就不得不说到mongodb,现在我们来试一下scrapy操作mongodb 首先开启mongodb mongod --dbpath=D:\mongodb\db 开启服务后就 ...
- nodejs快速测试
对于一些js功能,可以通过nodejs快速搭建测试环境 1.这里我们先通过express脚手架快速搭建一个项目,或者init一个空项目 2.mkdir script 3.这里假设我们的场景是MQTT接 ...
- Javascript面试题&知识点汇总
问题&答案 什么时候 a ==1 && a== 2 && a==3 为 true? var a = { i: 1, toString: function () ...
- Nginx笔记总结二:Nginx编译参数
-prefix= 安装路径-with-http_ssl_module ...