目录

项目一：鼠标拖动方块

项目二：网页显示键入字母

项目三：实现滚播图

项目四:   本地数据记事本

项目一：鼠标拖动方块

代码：

<!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)的更多相关文章

  1. github javascript相关项目star数排行榜(前30，截止2016.11.18)：

    github javascript相关项目star数排行榜(前30,截止2016.11.18): 前端开源框架 TOP 100 前端 TOP 100:::::https://www.awesomes. ...

  2. vue项目工具文件utils.js javascript常用工具类，javascript常用工具类，util.js

    vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...

  3. Javascript 常用函数【3】

    jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() { if ($(t ...

  4. JavaScript常用正则表达式与应用（一）

    JavaScript的String类和RegExp对象类都定义了相关方法使用正则表达式进行模式匹配,本文将以连载方式介绍JavaScript常用正则表达式与相关应用,欢迎交流 本节是连载一,首先介绍J ...

  5. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  6. javascript常用知识点集

    javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...

  7. JavaScript常用函数

    JavaScript常用函数 常规函数 数组函数 日期函数 数学函数 字符串函数 常规函数 (1)alert函数:显示一个警告对话框,包括一个OK按钮.(alert("输入错误") ...

  8. javascript常用工具类整理（copy)

    JavaScript常用工具类 类型 日期 数组 字符串 数字 网络请求 节点 存储 其他 1.类型 isString (o) { //是否字符串 return Object.prototype.to ...

  9. 【javascript】javascript常用函数大全

    javascript函数一共可分为五类:   •常规函数   •数组函数   •日期函数   •数学函数   •字符串函数   1.常规函数   javascript常规函数包括以下9个函数:   ( ...

随机推荐

  1. JS如何判断是否已经引入某个css或是js？

    http://bbs.csdn.net/topics/390541081 function isInclude(name){     var js= /js$/i.test(name);     va ...

  2. NIO之路1--传统BIO到NIO的演变过程

    一.BIO时代 BIO1.0版本 在jdk1.4之前,java网络编程都是采用的BIO模式,BIO全称是Blocking IO,也就是阻塞式IO 接下来就以拨打10086客服电话为例,介绍下BIO是如 ...

  3. CF832C

    题目链接:http://codeforces.com/contest/832/problem/C 题目大意: n个人,面向左或者右站在同一条轴上,每个人在轴上的坐标为x,速度为v.请你在某个位置放置一 ...

  4. ShoneSharp语言(S#)的设计和使用介绍系列（9）— 一等公民“函数“爱炫巧

    ShoneSharp语言(S#)的设计和使用介绍 系列(9)— 一等公民“函数“爱炫巧 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/Shon ...

  5. Istio的流量管理(实操二)(istio 系列四)

    Istio的流量管理(实操二)(istio 系列四) 涵盖官方文档Traffic Management章节中的inrgess部分. 目录 Istio的流量管理(实操二)(istio 系列四) Ingr ...

  6. git简单的使用步骤

    Git介绍 Git是分布式版本控制系统 集中式VS分布式,SVN VS Git 1)SVN和Git主要的区别在于历史版本维护的位置 2)这两个工具主要的区别在于历史版本维护的位置Git本地仓库包含代码 ...

  7. BUUCTF WEB

    BUUCTF 几道WEB题WP 今天做了几道Web题,记录一下,Web萌新写的不好,望大佬们见谅○|￣|_ [RoarCTF 2019]Easy Calc 知识点:PHP的字符串解析特性 参考了一下网 ...

  8. MySQL 可重复读，差点就我背上了一个 P0 事故！

    小黑黑的碎碎念 哎,最近有点忙,备考复习不利,明天还要搬家,好难啊!! 本想着这周鸽了,但是想想还是不行,爬起来,更新一下,周更可不能断.偷懒一下,修改一下之前的一篇历史文章,重新发布一下. P0 事 ...

  9. day08 for循环与字符串掌握操作

    # 1.什么是for循环# 循环就是重复做某件事情,for循环是python提供第二种循环机制# 2.为何:理论上for循环可以做的事情while循环也可以做# for循环再循环取值(遍历取值)比wh ...

  10. Spring boot Sample 001之spring-boot-begin-hello

    一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 初识Spring Boot 三.步骤 3.1.点击File -> New Project -> Spring I ...