不确定如何在我的随机引言生成器中添加引言作者的图片,需要帮助。
创始人
2024-12-27 20:00:56
0

要在你的随机引言生成器中添加引言作者的图片,你可以使用HTML和CSS来实现。以下是一个示例代码,展示了如何将引言作者的图片添加到生成的引言中:

HTML代码:

CSS代码:

#quote-container {
  text-align: center;
  margin-top: 20px;
}

#quote {
  font-size: 24px;
  font-weight: bold;
}

#author {
  margin-top: 10px;
  font-style: italic;
}

#author-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 10px;
}

JavaScript代码:

// 定义引言和作者的数组
var quotes = [
  "引言1",
  "引言2",
  "引言3"
];

var authors = [
  "作者1",
  "作者2",
  "作者3"
];

var images = [
  "作者1图片链接",
  "作者2图片链接",
  "作者3图片链接"
];

// 随机生成引言的索引
var randomIndex = Math.floor(Math.random() * quotes.length);

// 获取引言和作者的元素
var quoteElement = document.getElementById("quote");
var authorElement = document.getElementById("author");
var authorImageElement = document.getElementById("author-image");

// 将引言和作者的内容填充到HTML元素中
quoteElement.innerHTML = quotes[randomIndex];
authorElement.innerHTML = "- " + authors[randomIndex];
authorImageElement.src = images[randomIndex];

以上代码中,你需要将图片链接替换成实际的图片链接,以便显示作者的图片。通过使用JavaScript的Math.random()函数生成一个随机索引,然后将引言、作者和图片的内容填充到对应的HTML元素中,即可实现引言作者的图片显示。

相关内容

热门资讯

iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
iphone系统与安卓系统更新... 最近是不是你也遇到了这样的烦恼?手机更新系统总是失败,急得你团团转。别急,今天就来给你揭秘为什么iP...
安卓系统怎么连不上carlif... 安卓系统无法连接CarLife的原因及解决方法随着智能手机的普及,CarLife这一车载互联功能为驾...
安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...
oppo手机安卓系统换成苹果系... OPPO手机安卓系统换成苹果系统:现实吗?如何操作?随着智能手机市场的不断发展,用户对于手机系统的需...
安卓平板改windows 系统... 你有没有想过,你的安卓平板电脑是不是也能变身成Windows系统的超级英雄呢?想象在同一个设备上,你...
安卓系统上滑按键,便捷生活与高... 你有没有发现,现在手机屏幕越来越大,操作起来却越来越方便了呢?这都得归功于安卓系统上的那些神奇的上滑...
安卓系统连接耳机模式,蓝牙、有... 亲爱的手机控们,你们有没有遇到过这种情况:手机突然变成了“耳机模式”,明明耳机没插,声音却只从耳机孔...
安装了Anaconda之后找不... 在安装Anaconda后,如果找不到Jupyter Notebook,可以尝试以下解决方法:检查环境...
安卓系统拦截短信在哪,安卓系统... 你是不是也遇到了这种情况:手机里突然冒出了很多垃圾短信,烦不胜烦?别急,今天就来教你怎么在安卓系统里...