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个函数: ( ...
随机推荐
- Jenkins-Sonar集成配置及注意点
首先说说关于Jenkins集成Sonar的相关配置:我jenkins与Sonar不在同一个服务器上! 先现在 SonarQube Scanner 插件. SonarQube Servers:系统配置 ...
- MyBatis In的使用
http://blog.csdn.net/unei66/article/details/17792503 MyBatis In的使用 标签: mybatisin 2014-01-03 16:23 74 ...
- DFS序--一般都要转化为顶点到每个点
There is a rooted tree with n nodes, number from 1-n. Root’s number is 1.Each node has a value ai. I ...
- 【Java_集合框架Set】HashSet、LinkedHashSet、TreeSet使用区别
HashSet:哈希表是通过使用称为散列法的机制来存储信息的,元素并没有以某种特定顺序来存放: LinkedHashSet:以元素插入的顺序来维护集合的链接表,允许以插入的顺序在集合中迭代: Tree ...
- C语言数据类型整理
基本类型: 它们是算术类型,包括两种类型:整数类型和浮点类型. 枚举类型: 它们也是算术类型,被用来定义在程序中只能赋予其一定的离散整数值的变量. void 类型: 类型说明符 void 表明没有可用 ...
- 前端基础进阶（十五）：详解 ES6 Modules
对于新人朋友来说,想要自己去搞定一个ES6开发环境并不是一件容易的事情,因为构建工具的学习本身又是一个非常大的方向,我们需要花费不少的时间才能掌握它. 好在慢慢的开始有大神提供了一些非常简单易懂,学习 ...
- Life In Changsha College- SQA计划与验收测试规程
本次任务 以前面小组完成的SCRUM设计任务作为背景,拟制软件开发任务的虚拟SQA计划. 编制前面小组完成的SCRUM设计任务的验收测试规程. SQA计划 验收测试规程 测试分析:工程完成的功能包括登 ...
- python之robotframework+pycharm测试框架
一.robotframework简介 Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式 ...
- [256个管理学理论]002.青蛙效应（Frog Effect）
青蛙效应(Frog Effect) 从一个话题开始: 当下,社会发展突飞猛进,日新月异.在世界经济危机中,我国国民生产总值增长幅度始终在8%以上,引起世人的瞩目. 但,在国内时常也能听到广大投资者对股 ...
- [Objective-C] 004_继承封装与多态
继承 面向对象编程 (OOP) 语言的一个主要功能就是"继承".继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展.通过继承创建的 ...