JavaScript常用项目(更新至19.11.17)
目录
项目一：鼠标拖动方块
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body,html{
width: 100%;
height: 100%;
}
#d1{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
}
</style>
<title></title>
</head>
<body>
<div id="d1">
</div>
<script type="text/javascript">
var flag=false;
var div1=document.getElementById('d1');
var moveDiv1=function(x,y){
if(flag){
div1.style.left=x-100+'px';
div1.style.top=y-100+'px';
}
}
document.body.addEventListener('mousedown',function(){
flag=true;
})
document.body.addEventListener('mouseup',function(){
flag=false;
})
document.body.addEventListener('mousemove',function(result){
moveDiv1(result.clientX,result.clientY);
})
</script>
</body>
</html>
运行截图：
项目二：网页显示键入字母
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str="";
document.body.addEventListener('keypress',function(result){
str+=result.key;
document.body.innerHTML=str;
});
</script>
</body>
</html>
运行截图：
项目三：实现滚播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片滚动</title>
<style type="text/css">
.wrap{
width: 800px;
}
.form{
list-style: none;
position: relative; //和下面absolute实现将所有图片（列表）重叠起来
}
.line{
width: 800px;
height: 300px;
position: absolute;
}
.line:nth-child(1){ //便于通过css来控制多个相同class属性的标签
background: mediumvioletred;
}
.line:nth-child(2){
background: blueviolet;
}
.line:nth-child(3){
background: greenyellow;
}
.line:nth-child(4){
background: goldenrod;
}
.line:nth-child(5){
background: aquamarine;
}
.line.active{ //谁在最上面显示谁
z-index: 10;
}
</style>
</head>
<body>
<div id="" class="wrap">
<ul class="form">
<li class="line">1</li>
<li class="line">2</li>
<li class="line">3</li>
<li class="line">4</li>
<li class="line">5</li>
</ul>
</div>
<script type="text/javascript">
var line=document.getElementsByClassName('line');
var index=0; //通过index来控制现在是显示的第几张图片
line[index].className="line active";
var changeLine=function(n){
index++;
console.log(index);
for(var i=0;i<line.length;i++){
line[i].className="line";
}
line[index%line.length].className="line active";
}
setInterval(changeLine,1000);
</script>
</body>
</html>
运行截图：
项目四、本地数据记事本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{
background: #e3e3e3;
}
.wrap{
width: 500px;
margin: 0px auto; /*整体左右居中*/
background: white;
}
button{
cursor: pointer; /*鼠标放上button后出现小手*/
}
.inputNode{
width: 100%;
height: 30px;
box-sizing: border-box; /*解决加入文本框后边缘不齐*/
margin-bottom: 4px;
}
.addBtn{
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="list"></ul>
<div class="addwrap">
<input type="text" id="addTitle" class="inputNode" placeholder="输入标题"/>
<input type="text" id="addContent" class="inputNode" placeholder="输入内容"/> //初始化input的内容 不同于value
</div>
<button type="button" id="addBtn">添加</button>
</div>
<script type="text/javascript">
var ul=document.getElementById('list'); //如果是根据ClassName返回的是数组
var addBtn=document.getElementById('addBtn');
var inputTitle=document.getElementById('addTitle');
var inputContent=document.getElementById('addContent');
var list=[];
var tpl='<li class="item"><p class="title">{%temp1%}</p><p class="content">{%temp1%}</p><button type="button" class="changebtn">修改</button></li>';
//定义模板
var filllist=function(){
if(list.length==0){
ul.innerHTML='<li>没有内容</li>'; //套入模板
return
}
var str=' ';
for(var i=0;i<list.length;i++){
str+=tpl.replace('{%temp1%}',list[i].title).replace('{%temp1%}',list[i].content);
}
document.getElementById('list').innerHTML=str;
}
addBtn.addEventListener('click',function(){ //添加时事件 （事件和运行函数不矛盾）
if(!inputTitle.value||!inputTitle.value){
alert('存在空白项，请重新输入！');
return;
}
var obj={ //定义数组 （键值对）
title:inputTitle.value,
content:inputContent.value,
}
list.push(obj);
inputTitle.value='';
inputContent.value='';
filllist();
savaList();
});
var savaList=function(){
localStorage.setItem('localData',JSON.stringify(list)); //强制转化为字符串形式
}
var getList=function(){
var localList=localStorage.getItem('localData');
localList=JSON.parse(localList); //解析字符串
return localList;
}
var main=function(){
if(!localStorage.length){
list=[];
}else{
list=getList();
}
filllist();
}
main();
</script>
</body>
</html>运行截图：
JavaScript常用项目(更新至19.11.17)的更多相关文章
- github javascript相关项目star数排行榜(前30，截止2016.11.18)：
github javascript相关项目star数排行榜(前30,截止2016.11.18): 前端开源框架 TOP 100 前端 TOP 100:::::https://www.awesomes. ...
- vue项目工具文件utils.js javascript常用工具类，javascript常用工具类，util.js
vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...
- Javascript 常用函数【3】
jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() { if ($(t ...
- JavaScript常用正则表达式与应用（一）
JavaScript的String类和RegExp对象类都定义了相关方法使用正则表达式进行模式匹配,本文将以连载方式介绍JavaScript常用正则表达式与相关应用,欢迎交流 本节是连载一,首先介绍J ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
- javascript常用知识点集
javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...
- JavaScript常用函数
JavaScript常用函数 常规函数 数组函数 日期函数 数学函数 字符串函数 常规函数 (1)alert函数:显示一个警告对话框,包括一个OK按钮.(alert("输入错误") ...
- javascript常用工具类整理（copy)
JavaScript常用工具类 类型 日期 数组 字符串 数字 网络请求 节点 存储 其他 1.类型 isString (o) { //是否字符串 return Object.prototype.to ...
- 【javascript】javascript常用函数大全
javascript函数一共可分为五类: •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数: ( ...
随机推荐
- Error creating bean with name 'org.springframework.aop.aspectj.AspectJPointc
问题 出现报错: Error creating bean with name 'org.springframework.aop.aspectj.AspectJPointc 原因 缺失两个库文件: as ...
- BZOJ1022
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2701 Solved: 1721[Submit] ...
- Liquibase使用小结
简介 Liquibase是一个用于跟踪.管理和应用数据库变化的开源数据库重构工具.它将所有数据库的变化保存在XML文件中,便于版本控制和项目部署升级.在快速搭建项目的JHipster框架中集成了该工具 ...
- layui 让弹窗始终居中于屏幕
前话:今天用 layer.confirm() 弹窗的时候,滚动到页面尾部再弹窗时,发现弹窗还显示在上面,要滚动会上面才能看到. 度娘找了一个获取滚动条位置的方法: function ScollPos ...
- 阿里云ECS封25端口导致wordpress无法发送邮件的解决
在有人评论你的文章,wordpress默认会尝试向博主发送邮件,而如果你用的是阿里云ECS,你会发现评论已经成功了,但是由于邮件发送失败会导致用户评论后页面就卡住了,原因就在于阿里云的ECS目前已经全 ...
- oracle计算两日期相差多少秒，分钟，小时，天，周，月，年
--计算两个时间差相差多少秒select ceil((sysdate-t.transdate)* 24 * 60 * 60),t.transdate,sysdate from esc_trans_lo ...
- 搭建本地的yum仓库-较简单
1.创建目录安装软件程序 1.在/root路径下创建123.sh文件,把此文件复制到123.sh里, sh 123.sh2.首选安装nginx,作为web展示 3.强力清除老版本残留rpm -e n ...
- 【JUC】阻塞队列&生产者和消费者
阻塞队列 线程1往阻塞队列添加元素[生产者] 线程2从阻塞队列取出元素[消费者] 当队列空时,获取元素的操作会被阻塞 当队列满时,添加元素的操作会被阻塞 阻塞队列的优势:在多线程领域,发生阻塞时,线程 ...
- python3.7 64bit安装pygame1.9.3
https://blog.csdn.net/xiaolixi199311/article/details/79209506/
- Java集合（十）实现Map接口的HashMap
Java集合(十)继承Map接口的HashMap 一.HashMap简介(基于JDK1.8) HashMap是基于哈希表(散列表),实现Map接口的双列集合,数据结构是“链表散列”,也就是数组+链表 ...