目录

项目一：鼠标拖动方块

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

项目三：实现滚播图

项目四:   本地数据记事本

项目一：鼠标拖动方块

代码：

<!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. 教你避过安装TensorFlow的两个坑

    TensorFlow作为著名机器学习相关的框架,很多小伙伴们都可能要安装它.WIN+R,输入cmd运行后,通常可能就会pip install tensorflow直接安装了,但是由于这个库比较大,接近 ...

  2. MySQL（6）— 事务

    六.事务 ACID: 原子性.一致性.隔离性和持久性 原子性(atomicity) :一组事务,不能再细分了,其中的sql, 要么全部提交成功,要么全部失败回滚,不能只提交其中的一部分操作. 一致性( ...

  3. 51Nod栈

    LYK有一个栈,众所周知的是这个数据结构的特性是后进先出的. LYK感觉这样子不太美妙,于是它决定在这个前提下将其改进,也就是说,每次插入元素时,可以在栈顶或者栈底插入,删除元素时,只能在栈顶删除.L ...

  4. python 串口 透传

    python正常情况通过串口 serial  传输数据的时候,都是以字符串的形式发送的 str = ‘abcd’ ser.write(str.encode())#直接发送str报错,需要发送byte类 ...

  5. Pyqt5_Python运用过程中一些问题和技巧

    安装python3&pyqt5 1.         网下载python3.7安装包,安装时选择自定义安装,勾选上PIP 直接去官网上下载,一路下一步就可以了,然后将D:\Python37.D ...

  6. eclipse——管理远程资源的缓存，例如从Internet下载的资源。

    原文:Manage the cache of remote resources,such as those downloaded from the internet.

  7. Android启动过程_大致流程

    Android大致启动过程如图(基于O版本  使用draw.io画的). 注:这是通过查询结合自己了解的,还有不少不明确的,后续有进展完善,欢迎指正. 说明:绿色是主要几个的阶段.其他围绕这几个阶段的 ...

  8. 【书签】stacking、blending

    读懂stacking:模型融合Stacking详解/Stacking与Blending的区别 https://blog.csdn.net/u014114990/article/details/5081 ...

  9. echarts的时间轴的提示内容写在轴下方

    echarts的时间轴的提示内容写在轴下方 在echarts中横坐标的拖动轴dataZone的提示内容在两端,并且没有相关配置让其显示在轴下方或者其他位置. 解决方式: 在图标下方添加dom并且监听拖 ...

  10. vc程序设计--图形输出3

    // 实验2.cpp : 定义应用程序的入口点. // #include "framework.h" #include "实验2.h" #define MAX_ ...