hz-zhhq-app/node_modules/vconsole/dev/element.html

62 lines
1.8 KiB
HTML
Raw Normal View History

2025-01-22 10:53:47 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<title>Test: Element</title>
<link href="../example/lib/weui.min.css" rel="stylesheet"/>
<link href="../example/lib/demo.css" rel="stylesheet"/>
<script type="module" src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
<div id="page" class="page">
<h1 id="title" class="page_title">Element</h1>
<div id="text" class="weui_text_area">
Hello World!
</div>
<a onclick="changeAttr()" href="javascript:;" class="weui_btn weui_btn_default">changeAttr</a>
<a onclick="changeCharacterData()" href="javascript:;" class="weui_btn weui_btn_default">changeCharacterData</a>
</div>
</body>
</html>
<script type="module">
import '../dist/vconsole.min.js';
window.vConsole = new window.VConsole({
maxLogNumber: 1000,
// disableLogScrolling: true,
onReady: function() {
console.log('vConsole is ready.');
},
onClearLog: function() {
console.log('on clearLog');
}
});
</script>
<script>
let handleMethod;
function changeAttr() {
handleMethod = () => {
console.log('changeAttr');
document.body.style.background = `hsl(${(Math.random() * 255) | 0}, 92%, 67%)`;
document.getElementById('page').style.background = `hsl(${(Math.random() * 255) | 0}, 92%, 67%)`;
};
}
function changeCharacterData() {
handleMethod = () => {
console.log('changeCharacterData');
const node = document.getElementById('title').firstChild;
node.textContent = Math.random();
};
}
document.addEventListener("click", () => {
if (handleMethod) {
handleMethod();
}
});
</script>