【发布时间】:2020-10-03 12:11:41
【问题描述】:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NYT API</title>
<link rel="stylesheet" href="css\nyt.css">
<script defer src="js\nyt.js"></script>
</head>
<body>
<section>
<header>
<h1>Top New York Times HeadLines</h1>
<h3>This is CTEC 126 Weekly Assignment</h3>
<label for="section">Select a Section</label>
<select name="section" id="section">
<option value="home">Home</option>
<option value="arts">Art</option>
<option value="business">Business</option>
<option value="dining">Dining</option>
<option value="fashion">Fashion</option>
<option value="health">Health Magazine</option>
<option value="nationaloption">National Option</option>
<option value="politics">Politics</option>
<option value="realestate">Real Estate</option>
<option value="science">Science</option>
<option value="sports">Sports</option>
<option value="technology">Technology</option>
<option value="world">World</option>
</select>
<button id="refresh">Refresh</button>
</header>
<div id="stories"></div>
</section>
<script>
const stories = document.querySelector('#stories');
function callAPI() {
fetch(`http://api.nytimes.com/svc/topstories/v2/${section.value}.json?api-key=ue5gpNuOXmVwacpftV5uEmjyTFwYmM4i`)
.then(res => res.json())
.then(data => {
let output = ''
console.log(data);
// Call the displayStories() function here to display the content on the page.
displayStories(data, output);
});
}
//modify the function to accept one more argument: output
function displayStories(data, output) {
data.results.forEach(item => {
// Adding string for more clarity.
output += `<div class="hourly">`
output += `<h1>${(item.title)}</h1>`
output += `<h1><img style="float: left; width: 120px;" src=${item.multimedia[4].url} alt="ICON"></h1>`
output += `<div>${(item.created_date)}</div>`
output += `<div>${(item.byline)}</div>`
output += `<div> Section: ${(item.section)}</div>`
output += `<br>`
output += `<div>${(item.abstract)}</div>`
output += `</div>`
stories.style.display = "block"
stories.innerHTML = output
});
}
const section = document.querySelector('#section')
const refreshBtn = document.querySelector('#refresh')
section.addEventListener('change', () => {
callAPI()
});
refreshBtn.addEventListener('click', () => {
alert('Refreshing')
callAPI()
});
callAPI();
</script>
</body>
</html>
这是我的代码,我只想显示月、日和年!我现在的代码将像这样显示 2020-06-13T13:07:15-04:00,我只希望代码显示 2020 年 6 月 13 日,没有时间或其他任何事情!我感谢你们的任何帮助!非常感谢!
【问题讨论】:
标签: javascript html arraylist