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个函数: ( ...
随机推荐
- vue 使用cli脚手架手动创建项目 相关的选择配置及真正项目的开始
转载https://www.jianshu.com/p/635bd3ab7383 根据上述连接将基本的环境和命令和装好 使用命令行 vue create 项目名称 出现选项 选择手动(没有截图展 ...
- 解决WordPress网站被利用xmlrpc.php文件攻击问题
原因在于使用的WORDPRESS程序默认xmlrpc.php开启,而被用来DDOS攻击导致占用资源过高. 如何解决这个问题呢? 是屏蔽 XML-RPC (pingback) 的功能. add_filt ...
- Django创建应用以及路由的配置
Django简介:是一个开放源代码的web 应用框架,由python 写成.初次发布于2005年7月,并于2008年9月发布了第一个正式版本1.0. 文件说明:manage.py:一个命令行工具,可以 ...
- h5中嵌入视频自动播放的问题
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
- 【JavaScript数据结构系列】07-循环链表CircleLinkedList
[JavaScript数据结构系列]07-循环链表CircleLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识循环链表 首节点与尾节点相连的,就构成循环链表.其 ...
- [C#] 使 ToolTip 一直显示 （在 WinForm 与 WPF 中的差异解决方案）
需求 自己绘制的UI,检测鼠标位置,适时显示出 ToolTip 1 WinForm 的 ToolTip // Member define: private ToolTip _toolTip = new ...
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- C# 数据操作系列 - 19 FreeSql 入坑介绍
0. 前言 前几天FreeSql的作者向我推荐了FreeSql框架,想让我帮忙写个文章介绍一下.嗯,想不到我也能带个货了.哈哈,开个玩笑-看了下觉得设计的挺有意思的,所以就谢了这篇文章. 简单介绍一下 ...
- 题解 P6509 【[CRCI2007-2008] JEDNAKOST】
洛谷题目传送门!! 洛谷博客!! 这道题感觉是一个很另类的DP 至少我的做法是这样的. 重要前置思想:把A存成字符串!!! (应该也没人会想着存成int和long long 吧) 首先,我们定义状态 ...
- [256个管理学理论]005.羊群效应（Herd Behavior）
羊群效应(Herd Behavior) 来自于大洋彼岸的让你看不懂的解释: “羊群效应”,也叫“从众效应”,是个人的观念或行为由于真实的或想像的群体的影响或压力,而向与多数人相一致的方向变化的现象.表 ...