<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Content Loading</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
max-width: 600px;
width: 100%;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 1em;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.loader {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Dynamic Content Loading</h1>
<button onclick="loadContent()">Load Content</button>
<div class="loader">Loading...</div>
<div id="dynamicContent"></div>
</div>
<script>
function loadContent() {
const loader = document.querySelector('.loader');
const contentDiv = document.getElementById('dynamicContent');
loader.style.display = 'block';
contentDiv.innerHTML = '';
setTimeout(() => {
contentDiv.innerHTML = '<p>This is the dynamically loaded content.</p>';
loader.style.display = 'none';
}, 2000); // Simulate a network delay
}
</script>
</body>
</html>
动态内容加载
原创
©著作权归作者所有:来自51CTO博客作者小慕先森的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
SpringBoot 动态加载 jar 包,动态配置方案
SpringBoot 动态加载 jar 包,动态配置方案
java spring 加载 -
VUE动态加载不同组件
VUE动态加载不同组件
用户登录 属性值 加载 -
jQuery实现滚动时动态加载页面内容
看官赏点饭钱可好?
css 动态加载 加载 php 网页内容 -
android 可拖拽吸附按钮demo
仿知乎可拖动悬停按钮效果如下:实现的主要功能有:随手拖动 展开闭合 动态更改文字 全屏拖动,也可以限定位置 响应点击事件 可通过xml配置颜色和内部样式快速使用1.在工程根目录的build.gradle中添加依赖allprojects { repositories { google() jcenter() maven { u
android 可拖拽吸附按钮demo Android 自定义view 拖动悬浮 点击事件