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个函数: ( ...
随机推荐
- iterm 分屏切换快捷键与配色设置
(1)快捷键设置 ⌘ + d: 垂直分屏, ⌘ + shift + d: 水平分屏. ⌘ + ]和⌘ + [在最近使用的分屏直接切换. ⌘ + opt + 方向键切换到指定位置的分屏. ⌘ + 数字: ...
- 教你避过安装TensorFlow的两个坑
TensorFlow作为著名机器学习相关的框架,很多小伙伴们都可能要安装它.WIN+R,输入cmd运行后,通常可能就会pip install tensorflow直接安装了,但是由于这个库比较大,接近 ...
- LSM设计一个数据库引擎
Log-Structured Merge-Tree,简称 LSM. 以 Mysql.postgresql 为代表的传统 RDBMS 都是基于 b-tree 的 page-orented 存储引擎.现代 ...
- 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...
- 远程快速安装mysql
远程服务器安装mysql数据库 https://www.cnblogs.com/renjidong/p/7047396.html 1.新开的云服务器,需要检测系统是否自带安装mysql # yum l ...
- oracle 11g 用户名和密码默认区分大小写
oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_logon=false 设置改为不区分大小写.
- css：选择器（标签、类、ID、通配符）
1.css概述 主要的使用场景就是美化网页,布局页面 (1)html的局限性 它只关注内容的语义,只能做一些简单的样式,并且非常的臃肿和繁琐 (2)css对网页美化的作用 css是层叠样式表的简称,它 ...
- 50个SQL语句(MySQL版) 问题三
--------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...
- 和付费网盘说再见，跟着本文自己起个网盘（Java 开源项目）
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 网盘项目. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列. 今天给大家带 ...
- 【Linux】文件权限,ssh免密登录
1.文件/文件夹权限 例子: -rw-r--r--. 1 root root 12288 Aug 21 09:50 aliases.db drwxr-xr-x. 2 root root 4096 Au ...