前端开发者| 前端手机端开发模板 |
| 前端开发模板引擎 |
| 前端如何开发模板 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>js Bin</title>
<style media=”screen”>
* {
box-sizing:border-box;
margin:0;
padding:20px;
transition:background800ms;
}
html {
height:100%;
background:hsl(193,66%,55%);
font:bold40pxhelvetica,sans-serif;
color:red;
}
body {
height:100%;
background:hsl(193,66%,65%);
}
div {
height:100%;
background:hsl(193,66%,75%);
}
ul {
height:100%;
list-style:none;
background:hsl(193,66%,85%);
}
li {
height:100%;
background:hsl(193,66%,95%);
}
.highlight {
background:red;
}
</style>
</head>
<body>
<div class=””>
<ul>
<li>Click on a layer to watch the event move through the DOM tree.<br>点我就是了~</li>
</ul>
</div>
<script type=”text/javascript”>
var html = document.documentElement;
var body = document.body;
var div = body.querySelector(‘div’);
var ul = body.querySelector(‘ul’);
var li = body.querySelector(‘li’);
var pause = 200;
// Capture
html.addEventListener(‘click’, callback, true);
body.addEventListener(‘click’, callback, true);
div.addEventListener(‘click’, callback, true);
html.addEventListener(‘click’, callback, true);
ul.addEventListener(‘click’, callback, true);
li.addEventListener(‘click’, callback, true);
// Bubble
html.addEventListener(‘click’, callback, false);
body.addEventListener(‘click’, callback, false);
div.addEventListener(‘click’, callback, false);
html.addEventListener(‘click’, callback, false);
ul.addEventListener(‘click’, callback, false);
li.addEventListener(‘click’, callback, false);
function callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
setTimeout(function () {
target.classList.add(‘highlight’);
setTimeout(function () {
target.classList.remove(‘highlight’);
}, pause);
}, ms);
}
</script>
</body>
</html>
| open edx 模板前端开发 |
| 前端开发汇报总结ppt模板 |
| web前端开发自我介绍模板 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册