目录

项目一：鼠标拖动方块

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

项目三：实现滚播图

项目四:   本地数据记事本

项目一：鼠标拖动方块

代码：

<!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. Selenium RemoteWebDriver 利用CDP修改User-Agent

    地球人都知道,如果使用selenium时要修改user-agent可以在启动浏览器时添加配置项,如chromeOptions.addArguments("user-agent=xxx&quo ...

  2. 17-4 delete-truncate语句-练习

    --删除数据语句: --delete from 表名 where ... --delete语句如果不加where条件,表示将表中所有的数据都删除,加where条件后,会按照where条件进行删除. - ...

  3. thinkphp5.0 cache缓存机制

    首先引用缓存文件 use think\Cache; public function index(){ $data = Cache::get('showw');//去缓存 if($data){ echo ...

  4. WordPress 安全配置

    关闭后台主题编辑功能 WordPress后台的主题一旦权限开放就可以在后台直接编辑,如果没有开放则只可浏览.主机若有安装suPHP默认就是可以编辑.如果你觉得这项功能用不到,建议您可以关闭它,毕竟直接 ...

  5. thymeleaf抛出项目上下文ServletContext ，session，request等信息

    @RequestMapping("/alls") public String allsinfo(HttpSession session, HttpServletRequest re ...

  6. oracle 11g 用户名和密码默认区分大小写

    oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_logon=false 设置改为不区分大小写.

  7. Bank1

    Bank1: package banking1; //账户 public class Account { private double balance;// 账户余额 public Account(d ...

  8. Java的四种权限修饰符

    private:仅对本类可见 缺省(不需修饰符):对本包可见 protected:对本包及所有子类可见 public:对所有类可见 修饰符: * 权限修饰符:private,默认的,protected ...

  9. 性能测试之Docker监控

    微服务.大中台盛行的当下,容器化已经被广泛使用.在性能测试过程中,对容器的监控模型构建也是必不可少的. 我们性能测试监控模型的构建一直是围绕着Prometheus和Grafana来展开的.她们可以快速 ...

  10. PYTHON-函数调用函数名

    def fun1(x): print('......................') x() def fun2(): print('**********************') fun1(fu ...