1.使用js实现的点击删除作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello world~!!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
body{font:16px/1.5 'Microsoft Yahei';}
.clearfix:after{content:'';display:block;clear:both;}
.fl{float:left;}
.fr{float:right;}
#wrap{
height:580px;
background:linear-gradient(180deg,#8CC1DE,#F9A886);
overflow:hidden;
}
#wrap .container{
width:800px;
margin:50px auto;
}
#wrap .container .target{
width:50%;
background-color: #fff;
line-height:2;
min-height:550px;
}
#wrap .container .target p{
margin:50px 20px 0;
color:#F9A886;
}
#wrap .container .target a{
background-color: #fff;
text-decoration: none;
color:#000;
}
#wrap .container .target a:hover{
color:red;
}
#wrap .container .target ol li{
list-style: none;
font-style:normal;
display: inline-block;
margin:10px 0 0 20px ;
padding:0 5px;
color:#999;
border:1px solid #ccc;
}
#wrap .container .target ol li:hover i{
color:red;
cursor:pointer;
}
#wrap .container .target ol li span{
padding-right:5px;
}
#wrap .container .target ol li i{
padding:0 5px;
border-left:1px solid #ccc;
}
#wrap .container .show{
width:50%;
min-height:550px;
background-color: rgba(0,0,0,0.5);
}
#wrap .container .show ul{
margin-top:50px;
}
#wrap .container .show ul li{
list-style: none;
font-style:normal;
display: inline-block;
margin:20px;
padding:5px;
border:1px solid #ccc;
color:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container clearfix">
<div class="target fl">
<p> 热门目的地:
<a href="javascript:void(0);">马来西亚</a>
<a href="javascript:void(0);">泰国</a>
<a href="javascript:void(0);">三亚</a>
<a href="javascript:void(0);">新西兰</a>
<a href="javascript:void(0);">云南</a>
</p>
<ol class='clearfix' onselectstart = 'return false'>
</ol>
</div>
<div class="show fr">
<ul class='clearfix'>
</ul>
</div>
</div>
</div>
</body>
<script>
var aA = document.getElementsByTagName('a');
var OL= document.getElementsByTagName('ol')[0];
var tar_li= OL.getElementsByTagName('li');
var Ul= document.getElementsByTagName('ul')[0];
var show_li= Ul.getElementsByTagName('li');
var new_obj;
for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
if(Ul.children){
for(var i=0;i<show_li.length;i++){
if(show_li[i].innerHTML.match(this.innerHTML)){
console.log('ok');
return false;
}
}
}
var new_span = document.createElement('span');
new_span.innerHTML = this.innerHTML;
var new_i = document.createElement('i');
new_i.innerHTML = 'x';
new_i.onclick = cancel;
var new_li = document.createElement('li');
new_li.className = 'fl';
new_li.appendChild(new_span);
new_li.appendChild(new_i);
OL.appendChild(new_li);
new_obj = new_li.cloneNode(true);
var i = new_obj.firstElementChild.nextElementSibling;
new_obj.removeChild(i);
Ul.appendChild(new_obj);
}
}
function cancel(){
for(var i=0;i<show_li.length;i++){
if(show_li[i].innerHTML.match(this.previousElementSibling.innerHTML) ){
show_li[i].parentNode.removeChild(show_li[i]);
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}
</script>
</html>
2.小球弹动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="Fly老师">
<style>
body{font-family: "Microsoft YaHei",serif;}
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul,li{margin:0;padding:0;list-style:none;}
img{border:none;}
#wrap{
position: absolute;
z-index: 1;
left: 200px;
top: 200px;
width: 50px;
height: 50px;
border-radius: 50%;
background:radial-gradient(#fff 0%,#f00 100%);
}
#shadow{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#shadow p{
position: absolute;
width: 35px;
height: 35px;
background-color: pink;
transform-origin:center center;
transform: scale(1);
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrap"></div>
<div id="shadow"></div>
<script>
(function(){
let oWrap = document.getElementById("wrap");
let oShadow = document.getElementById("shadow");
let sL = oWrap.offsetLeft;
let sT = oWrap.offsetTop;
let stepX = 7,
stepY = 10;
let maxLeft,maxTop;
window.onresize = (function s(){
maxLeft = window.innerWidth - oWrap.offsetWidth;
maxTop = window.innerHeight - oWrap.offsetHeight;
return s;
})();
!function m(){
sL += stepX;
sT += stepY;
if( sL >= maxLeft ){
sL = maxLeft;
stepX = -stepX;
}
if(sL <= 0){
sL = 0;
stepX = -stepX;
}
if( sT >= maxTop ){
sT = maxTop;
stepY = -stepY;
}
if( sT <= 0 ){
sT = 0;
stepY = -stepY;
}
oWrap.style.left = sL+'px';
oWrap.style.top = sT+'px';
createShadow(sL,sT);
requestAnimationFrame(m);
}();
function createShadow(left,top){
let oP = document.createElement("p");
oP.style.left = left+7+'px';
oP.style.top = top+7+'px';
oP.style.transition = "transform .8s,opacity .8s";
setTimeout(()=>{
oP.style.transform = "scale(0.3)";
oP.style.opacity = "0";
});
setTimeout(()=>{oShadow.removeChild(oP)},800)
oShadow.appendChild(oP);
}
})();
</script>
</body>
</html>
3.个人简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
background-image: url(https://img0.baidu.com/it/u=976631688,3773003958&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685379600&t=b2271664dbcb1216fe1e56f396ba4488);
background-repeat: no-repeat;
background-size: cover;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
}
h1, h2 {
margin-bottom: 10px;
text-align: center;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
p {
margin-bottom: 10px;
}
ul {
list-style: none;
}
li {
margin-bottom: 5px;
}
.section {
margin-top: 40px;
}
.section:first-child {
margin-top: 0;
}
.section:last-child {
margin-bottom: 0;
}
.left {
float: left;
width: 70%;
}
.right {
float: right;
width: 30%;
text-align: center;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.education {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>个人简历</h1>
</header>
<section class="section">
<div class="left">
<h2>基本信息</h2>
<p><strong>姓名:</strong>张三</p>
<p><strong>性别:</strong>男</p>
<p><strong>出生日期:</strong>1990年1月1日</p>
<p><strong>联系电话:</strong>13800138000</p>
<p><strong>邮箱:</strong>zhangsan@123.com</p>
</div>
<div class="right">
<img src="https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685379600&t=6a84b22b193cd4880d4f424cae290374" alt="头像" width="150" height="150">
</div>
<div class="clearfix"></div>
</section>
<section class="section">
<div class="left">
<h2>个人简介</h2>
<p>我是一名计算机科学与技术专业的本科生,具有扎实的计算机基础知识,特别是在算法和数据结构方面较为熟练。拥有较强的编程能力,能够熟练使用 C++、Python 等编程语言,了解常用的 Web 开发技术。此外,我还具有严谨的逻辑思维能力和良好的团队合作意识,乐于沟通与分享。</p>
</div>
<div class="clearfix"></div>
</section>
<section class="section">
<div class="left">
<h2>教育背景</h2>
<ul class="education">
<li>
<h3>XX大学</h3>
<p>计算机科学与技术专业</p>
<p>本科,2018-2022</p>
</li>
</ul>
</div>
<div class="clearfix"></div>
</section>
<section class="section">
<div class="left">
<h2>技能</h2>
<ul>
<li>熟练掌握 C++、Python 等编程语言</li>
<li>掌握常用的 Web 开发技术,如 HTML、CSS、JavaScript、jQuery 等</li>
<li>了解常用的数据库,如 MySQL、MongoDB 等</li>
<li>熟悉常用的算法和数据结构,如排序、查找、树、图等</li>
<li>了解 Linux 操作系统</li>
</ul>
</div>
<div class="clearfix"></div>
</section>
<section class="section">
<div class="left">
<h2>项目经历</h2>
<ul>
<li>
<h3>XX 项目</h3>
<p>该项目使用了 C++ 编写,实现了一种基于特征点匹配和 RANSAC 算法的图像拼接技术。本人主要负责了该技术的算法调研、实现和优化,取得了较好的效果。</p>
</li>
</ul>
</div>
<div class="clearfix"></div>
</section>
</div>
</body>
</html>