在我的HTML中，我有一个图片标签，其中包含一个儿童图片。使用JavaScript，如何插入3个具有2个具有不同值的属性的源标签？我在下面放置了当前代码和预期结果。
我能够在值中插入相同的字符串。但是，我无法使每个字符串都不同。
我从这段代码开始
const PIC = document.querySelector('picture');
const IMAGE = document.querySelector('img');
for (var i = 0; i < 3; i++) {
var source = document.createElement('source'); //created Source element
var media = '(max-width:250px)';
source.setAttribute('media', media); //Set its media attribute
//created srcset attribute
var imgSrc = IMAGE.getAttribute('src'); //Img src
var width = 200;
var arr = [];
// strip off last 8 chars of image name
imgSrc = imgSrc.slice(0, -8);
arr[i] = imgSrc + '-' + width + '.jpg';
width += 200;
var srcset = arr.join(); //imgSrc + '-' + width + '.jpg';
source.setAttribute('srcset', srcset);
// console.log(source.outerHTML)
var insert = PIC.insertBefore(source, PIC.firstChild);
}
console.log(PIC.outerHTML)<picture>
<img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>
并且需要创建此代码。仅使用Javascript。
<picture>
<source media="(max-width:250px)" srcset="images/turtle2-200.jpg">
<source media="(max-width:450px)" srcset="images/turtle2-400.jpg">
<source media="(min-width:451px)" srcset="images/turtle2-800.jpg">
<img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>
答案 0 :(得分：0)
只需将宽度向外移动到数组中即可
<picture>
<img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>import random
import pygame
pygame.init()
WHITE = (255,255,255)
GREY = (20,20,20)
BLACK = (0,0,0)
PURPLE = (100,0,100)
RED = (255,0,0)
size = (701,701)
screen = pygame.display.set_mode(size)
pygame.display.set_caption("Maze Generator")
done = False
clock = pygame.time.Clock()
width = 25
cols = int(size[0] / width)
rows = int(size[1] / width)
stack = []
pos = (0,0)
class Player(pygame.sprite.Sprite):
def __init__(self, image, pos, background):
super().__init__()
self.image = image
self.pos = pygame.Vector2(pos)
self.rect = self.image.get_rect(center=self.pos)
self.background = background
def update(self, events, dt):
pressed = pygame.key.get_pressed()
move = pygame.Vector2((0, 0))
if pressed[pygame.K_w]: move += (0, -1)
if pressed[pygame.K_a]: move += (-1, 0)
if pressed[pygame.K_s]: move += (0, 1)
if pressed[pygame.K_d]: move += (1, 0)
#if move.length() > 0: move.normalise_ip()
new_pos = self.pos + move*(dt/5)
new_rect = self.rect.copy()
new_rect.center = new_pos
new_rect.clamp_ip(self.background.get_rect())
new_pos = new_rect.center
hit_box = self.background.subsurface(new_rect)
for x in range(new_rect.width):
for y in range(new_rect.height):
if sum(hit_box.get_at((x, y))) < 500:
return
def load_background(filename):
background = (pygame.image.load("background.jpg"))
background = pygame.transform.rotate(background, -90)
background = pygame.transform.scale(background, (800,600))
return background
def load_player(background):
pimg = pygame.Surface((10, 10))
pimg.fill((200, 20, 20))
return Player(pimg, (25, 325), background)
class Cell():
def __init__(self,x,y):
global width
self.x = x * width
self.y = y * width
self.visited = False
self.current = False
self.walls = [True,True,True,True] # top , right , bottom , left
# neighbors
self.neighbors = []
self.top = 0
self.right = 0
self.bottom = 0
self.left = 0
self.next_cell = 0
def draw(self):
if self.current:
pygame.draw.rect(screen,RED,(self.x,self.y,width,width))
elif self.visited:
pygame.draw.rect(screen,WHITE,(self.x,self.y,width,width))
if self.walls[0]:
pygame.draw.line(screen,BLACK,(self.x,self.y),((self.x + width),self.y),1) # top
if self.walls[1]:
pygame.draw.line(screen,BLACK,((self.x + width),self.y),((self.x + width),(self.y + width)),1) # right
if self.walls[2]:
pygame.draw.line(screen,BLACK,((self.x + width),(self.y + width)),(self.x,(self.y + width)),1) # bottom
if self.walls[3]:
pygame.draw.line(screen,BLACK,(self.x,(self.y + width)),(self.x,self.y),1) # left
def checkNeighbors(self):
#print("Top; y: " + str(int(self.y / width)) + ", y - 1: " + str(int(self.y / width) - 1))
if int(self.y / width) - 1 >= 0:
self.top = grid[int(self.y / width) - 1][int(self.x / width)]
#print("Right; x: " + str(int(self.x / width)) + ", x + 1: " + str(int(self.x / width) + 1))
if int(self.x / width) + 1 <= cols - 1:
self.right = grid[int(self.y / width)][int(self.x / width) + 1]
#print("Bottom; y: " + str(int(self.y / width)) + ", y + 1: " + str(int(self.y / width) + 1))
if int(self.y / width) + 1 <= rows - 1:
self.bottom = grid[int(self.y / width) + 1][int(self.x / width)]
#print("Left; x: " + str(int(self.x / width)) + ", x - 1: " + str(int(self.x / width) - 1))
if int(self.x / width) - 1 >= 0:
self.left = grid[int(self.y / width)][int(self.x / width) - 1]
#print("--------------------")
if self.top != 0:
if self.top.visited == False:
self.neighbors.append(self.top)
if self.right != 0:
if self.right.visited == False:
self.neighbors.append(self.right)
if self.bottom != 0:
if self.bottom.visited == False:
self.neighbors.append(self.bottom)
if self.left != 0:
if self.left.visited == False:
self.neighbors.append(self.left)
if len(self.neighbors) > 0:
self.next_cell = self.neighbors[random.randrange(0,len(self.neighbors))]
return self.next_cell
else:
return False
def removeWalls(current_cell,next_cell):
x = int(current_cell.x / width) - int(next_cell.x / width)
y = int(current_cell.y / width) - int(next_cell.y / width)
if x == -1: # right of current
current_cell.walls[1] = False
next_cell.walls[3] = False
elif x == 1: # left of current
current_cell.walls[3] = False
next_cell.walls[1] = False
elif y == -1: # bottom of current
current_cell.walls[2] = False
next_cell.walls[0] = False
elif y == 1: # top of current
current_cell.walls[0] = False
next_cell.walls[2] = False
grid = []
for y in range(rows):
grid.append([])
for x in range(cols):
grid[y].append(Cell(x,y))
current_cell = grid[0][0]
next_cell = 0
# -------- Main Program Loop -----------
def main():
while not done:
# --- Main event loop
for event in pygame.event.get():
if event.type == pygame.QUIT:
return
global current_cell
play = False
current_cell.visited = True
current_cell.current = True
for y in range(rows):
for x in range(cols):
grid[y][x].draw()
next_cell = current_cell.checkNeighbors()
if next_cell != False:
current_cell.neighbors = []
stack.append(current_cell)
removeWalls(current_cell,next_cell)
current_cell.current = False
current_cell = next_cell
elif len(stack) > 0:
current_cell.current = False
current_cell = stack.pop()
play = True
"""
elif len(stack) == 0:
grid = []
for y in range(rows):
grid.append([])
for x in range(cols):
grid[y].append(Cell(x,y))
current_cell = grid[0][0]
next_cell = 0
"""
if play == True:
pygame.init()
screen_rect = screen.get_rect()
clock = pygame.time.Clock()
sprites = pygame.sprite.Group()
player = None
initialized = False
current_maze = None
dt = 0
while True:
events = pygame.event.get()
for e in events:
if e.type == pygame.QUIT:
return
if not initialized:
#current_maze = 0
background = load_background
player = load_player(background)
sprites.add(player)
initialized = True
player_x = player.pos[0]
player_y = player.pos[1]
if player_x >= 780 and 275 < player_y < 375:
current_maze += 1
# reset to first maze if all mazes were done
if current_maze >= mazes_len:
current_maze = 0
background = load_background(mazes[current_maze])
sprites.empty()
player = load_player(background)
sprites.add(player)
sprites.update(events, dt)
screen.fill(pygame.Color('grey'))
screen.blit(background, (0, 0))
sprites.draw(screen)
pygame.display.flip()
dt = clock.tick(60)
pygame.display.flip()
main()
pygame.quit()