随机生成 10 篇文章

const Mock = require('mockjs')
const user = {
    'id|+1':1,
    title:'@ctitle()',
    cname:'@cname',
    sentence:'@csentence(10)',
    paragraph: `@cparagraph()`,
    img:'@img(20x20)',
    datetime:"@datetime('yyyy年M月d日 H时m分s秒')",
}
const opts = {
  'users|10': [user],
}
const data = Mock.mock(opts)
console.log(JSON.stringify(data, null, 4))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <button onclick="getdate()">wz</button> -->
    <div>
    </div>
</body>
<script>
    async function getdate() {
        const response = await fetch('wz.json')
        const users = await response.json()
        // console.log(users)
        const div = document.querySelector('div')
        users.forEach((user)=>{
            const data = `
            <div>
            <h1>${user.id} ${user.title}</h1>
            <span>作者：${user.cname}</span>
            <span>发布时间：${user.datetime}</span>
            <span>简介：${user.sentence}</span>
            <p>${user.paragraph}${user.img}</p>
            </div>`
            div.insertAdjacentHTML('beforeend', data);
        })
    }
    window.onload = getdate
</script>
</html>

相关文章