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个函数: ( ...
随机推荐
- windows 10 2016 企业版 长期服务 激活方式
试了很多,失败. 使用这个ok———————————————————————————————— 使用方式: 2.1.下载AAct.exe https://www.baidu.com/link?url ...
- 使用records库操作SQL并且查询MySQL数据库
获取数据库 db = records.Database('mysql://root:xxxx@47.106.151.165/web_table?charset=utf8')注释:xxxx为数据密码 执 ...
- PIC单片机编译器自带的延时程序
https://wenku.baidu.com/view/3c94e2934028915f814dc205.html
- Spring_AOP_AspectJ支持的通知注解
1.AOP前奏: 使用动态代理解决日志需求 ArithmeticCalculator.java package com.aff.spring.aop.helloworld; public interf ...
- 用pandas处理数据遇到的坑
1.使用pandas.read_csv(filePath)方法来读取csv文件时,可能会出现这种错误:ParserError:Error tokenizing data.C error:Expecte ...
- web-信息泄露基础知识总结(持续更新)
web-信息泄露 1.git泄露 Git是一个开源的分布式版本控制系统,在执行git init初始化目录的时候,会在当前目录下自动创建一个.git目录,用来记录代码的变更记录等.发布代码的时候,如果没 ...
- 生成随机字符串 php
/** +---------------------------------------------------------- * 生成随机字符串 +------------------------- ...
- day 7 while循环
#隐式布尔值: 0 none 空# 一.流程控制# 短路运算:偷懒原则,偷懒到哪个位置,就把当前位置的值返回# 为0# (10>3 and 10 and 0 and 10 )or( 10> ...
- Shell编程案例：修改运维脚本输出效果
1. 需求:每日运维检查脚本dailymonitor.sh显示对服务器测试结果,其中命令 zabbix_get -s 192.168.111.21 -p 10050 -k "net.tcp. ...
- HTML、CSS与JS实现简易iPhone计算器
效果如图 源码,通俗易懂 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...