关于js 获取图片相对路径的问题
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title></head><styletype="tex...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body{
width: 1000px;
margin: 5px auto;
text-align: center;
}
ul{
margin-top: 5px;
padding: 0;
width: 1000px;
height: auto;
/*background-image: url(img/dc87c201fd663d744673a9bd334c8696.jpg);*/
overflow: hidden;
}
li{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 10%;
height: 70.06px;
}
img{
width: 100px;
height: 70.06px;
}
</style>
<body>
<input type="button" value="开始" onclick="kai_shi()" />
<a>剩余时间：</a><a></a>
<ul></ul>
</body>
</html>
<script type="text/javascript">
var arr = new Array();
var img_ysrc,img_xsrc;
var time;
for (var i=1;i<81;i++) {
arr.push(i);
}
// arr.sort(function(a,b){
// return Math.random()-0.5;
// });
function kai_shi(){
var a = document.getElementsByTagName("a")[1];
var second = 600;
a.innerHTML=second + "s";
document.getElementsByTagName("input")[0].disabled = true;
time = setInterval(ji_shi,1000);
function ji_shi(){
second--;
a.innerHTML=second + "s";
if(second==0){
clearInterval(time);
alert("游戏结束");
document.getElementsByTagName("ul")[0].style.display = "none";
}
}
for (var i=1;i<=80;i++) {
var ul = document.getElementsByTagName("ul")[0];
var li = document.createElement("li");
ul.appendChild(li);
var hq_li = document.getElementsByTagName("li")[i-1];
hq_li.innerHTML = "<img />";
var img = document.getElementsByTagName("img")[i-1];
if(arr[i-1]<10){
img.src = "img/images/1_0"+arr[i-1]+".gif";
}else if(arr[i-1]>=10){
img.src = "img/images/1_"+arr[i-1]+".gif";
}
img.draggable = true;
img.setAttribute("ondragstart","y_s(event)");
img.setAttribute("ondrop","y_d(event)");
img.setAttribute("ondragover","y_o(event)");
}
}
function y_s(ev){
ev.dataTransfer.setData("img",ev.target.src);
img_ysrc = ev.target;
}
function y_d(ev){
ev.preventDefault();
img_xsrc = ev.target;
change();
jian_che();
}
function change(){
var temp;
temp = img_xsrc.src;
img_xsrc.src = img_ysrc.src;
img_ysrc.src = temp;
}
function y_o(ev){
ev.preventDefault();
}
function jian_che(){
for(var i=1;i<=80;i++){
var img = document.getElementsByTagName("img")[i-1];
var src = img.getAttribute("src"); //问题就在这里
var a = src.substr(13,2);
if (i<10) {
i="0"+i;
}
if (i!=a) {
break;
}
if (i==80) {
alert("你赢了");
clearInterval(time);
document.getElementsByTagName("ul")[0].style.display = "none";
}
}
}
</script>
当i=16是，img.getAttribute("src")就获取到了绝对路径，这是为什么啊？？ 展开
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body{
width: 1000px;
margin: 5px auto;
text-align: center;
}
ul{
margin-top: 5px;
padding: 0;
width: 1000px;
height: auto;
/*background-image: url(img/dc87c201fd663d744673a9bd334c8696.jpg);*/
overflow: hidden;
}
li{
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 10%;
height: 70.06px;
}
img{
width: 100px;
height: 70.06px;
}
</style>
<body>
<input type="button" value="开始" onclick="kai_shi()" />
<a>剩余时间：</a><a></a>
<ul></ul>
</body>
</html>
<script type="text/javascript">
var arr = new Array();
var img_ysrc,img_xsrc;
var time;
for (var i=1;i<81;i++) {
arr.push(i);
}
// arr.sort(function(a,b){
// return Math.random()-0.5;
// });
function kai_shi(){
var a = document.getElementsByTagName("a")[1];
var second = 600;
a.innerHTML=second + "s";
document.getElementsByTagName("input")[0].disabled = true;
time = setInterval(ji_shi,1000);
function ji_shi(){
second--;
a.innerHTML=second + "s";
if(second==0){
clearInterval(time);
alert("游戏结束");
document.getElementsByTagName("ul")[0].style.display = "none";
}
}
for (var i=1;i<=80;i++) {
var ul = document.getElementsByTagName("ul")[0];
var li = document.createElement("li");
ul.appendChild(li);
var hq_li = document.getElementsByTagName("li")[i-1];
hq_li.innerHTML = "<img />";
var img = document.getElementsByTagName("img")[i-1];
if(arr[i-1]<10){
img.src = "img/images/1_0"+arr[i-1]+".gif";
}else if(arr[i-1]>=10){
img.src = "img/images/1_"+arr[i-1]+".gif";
}
img.draggable = true;
img.setAttribute("ondragstart","y_s(event)");
img.setAttribute("ondrop","y_d(event)");
img.setAttribute("ondragover","y_o(event)");
}
}
function y_s(ev){
ev.dataTransfer.setData("img",ev.target.src);
img_ysrc = ev.target;
}
function y_d(ev){
ev.preventDefault();
img_xsrc = ev.target;
change();
jian_che();
}
function change(){
var temp;
temp = img_xsrc.src;
img_xsrc.src = img_ysrc.src;
img_ysrc.src = temp;
}
function y_o(ev){
ev.preventDefault();
}
function jian_che(){
for(var i=1;i<=80;i++){
var img = document.getElementsByTagName("img")[i-1];
var src = img.getAttribute("src"); //问题就在这里
var a = src.substr(13,2);
if (i<10) {
i="0"+i;
}
if (i!=a) {
break;
}
if (i==80) {
alert("你赢了");
clearInterval(time);
document.getElementsByTagName("ul")[0].style.display = "none";
}
}
}
</script>
当i=16是，img.getAttribute("src")就获取到了绝对路径，这是为什么啊？？ 展开
1个回答
展开全部
js 并没有什么获取相对、绝对路径的区别，你的问题是每次执行 y_s(ev) 的时候都会重新设置 src：ev.dataTransfer.setData("img",ev.target.src);
而这里设置的就是ev.target.src获取全路径去从新设置的，所以你得不到正确的值，不是i=16，不一定的，看你移动了哪里
改变一下你获取值的方法就行，根据你路径的特点，这样获取：
var a = src.split("_")[1].split(".")[0];
这样不管是什么路径，就都没关系了。
而这里设置的就是ev.target.src获取全路径去从新设置的，所以你得不到正确的值，不是i=16，不一定的，看你移动了哪里
改变一下你获取值的方法就行，根据你路径的特点，这样获取：
var a = src.split("_")[1].split(".")[0];
这样不管是什么路径，就都没关系了。
追问
当删除掉ev.dataTransfer.setData("img",ev.target.src);会提示the server responded with a status of 404 (Not Found)这个错误，该怎么解决？
追答
不删除，
这句
var a = src.substr(13,2);
改成
var a = src.split("_")[1].split(".")[0];
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
