HTML5——行走日记

效果展示：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <!--定义样式-->

    <style>

        * {

            margin: ;

            padding: ;

        }

        li {

            list-style: none;

        }

        #div1, #div2 {

            float: left;

            width: 400px;

            height: 400px;

            border: 1px # solid;

            margin: 10px;

            position: relative;

            overflow: hidden;

        }

            #div2 ul {

                position: absolute;

                left: ;

                width: 2000px;

            }

                #div2 ul .box {

                    width: 400px;

                    height: 400px;

                    float: left;

                    overflow: hidden;

                }

            #div2 #childUl {

                width: 400px;

            }

        #childUl li {

            width: 400px;

            border-bottom: 1px # dashed;

        }

        #map {

            width: %;

            height: 380px;

        }

    </style>

    <script src="scripts/move.js"></script>

    <script src="http://api.map.baidu.com/api?v=1.3"></script>

    <script>

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var aInput = oDiv.getElementsByTagName('input');

    var oT = document.getElementById('t1');

    var iNow = window.localStorage.getItem('num') || ;

    var oChildUl = document.getElementById('childUl');

    var aChildLi = oChildUl.getElementsByTagName('li');

    var oUl = document.getElementById('ul1');

    var aBox = oUl.getElementsByClassName('box');

    var aBox1_input = aBox[].getElementsByTagName('input');

    var aBox1_div = aBox[].getElementsByTagName('div');

    var oBox2_input = aBox[].getElementsByTagName('input')[];

    var index = ;

    //窗体加载时就展示数据

    if( window.localStorage.getItem('num') ){

        for(var i=;i<iNow;i++){

            var oLi = document.createElement('li');

            oLi.innerHTML = window.localStorage.getItem('title'+i);

            oChildUl.appendChild( oLi );

        }

        changeLi();

    }

    aInput[].onclick = function(){  //保存本地

        window.localStorage.setItem('title'+iNow,aInput[].value);

        window.localStorage.setItem('ta'+iNow,oT.value);

        createLi();

        iNow++;

        window.localStorage.setItem('num',iNow);

    };

    aInput[].onclick = function(){ //提交后台

    };

    aInput[].onclick = function(){ //删除所有的数据

        window.localStorage.clear();

    };

    aInput[].onclick = function(){

        var This = this;

        navigator.geolocation.getCurrentPosition(function(position){

            var y = position.coords.longitude;

            var x = position.coords.latitude;

            if( This.checked ){

                window.localStorage.setItem('y'+iNow,y);

                window.localStorage.setItem('x'+iNow,x);

            }

            else{

                window.localStorage.removeItem('y'+iNow);

                window.localStorage.removeItem('x'+iNow);

            }

        });

    };

    function createLi(){

        var oLi = document.createElement('li');

        oLi.innerHTML = window.localStorage.getItem('title'+iNow);

        oChildUl.appendChild( oLi );

        changeLi();

    }

    function changeLi(){

        for(var i=;i<aChildLi.length;i++){

            aChildLi[i].index = i;

            aChildLi[i].onclick = function(){

                startMove(oUl,{left : -aBox[].offsetWidth });

                aBox1_div[].innerHTML = window.localStorage.getItem('title'+this.index);

                aBox1_div[].innerHTML = window.localStorage.getItem('ta'+this.index);

                if( window.localStorage.getItem('y'+this.index) ){

                    aBox1_input[].disabled = false;

                }

                else{

                    aBox1_input[].disabled = true;

                }

                index = this.index;

            };

        }

    }

    aBox1_input[].onclick = function(){

        startMove(oUl,{left : });

    };

    aBox1_input[].onclick = function(){

        startMove(oUl,{left : -*aBox[].offsetWidth});

        var map = new BMap.Map("map");

        var y = window.localStorage.getItem('y'+index);

        var x = window.localStorage.getItem('x'+index);

        var title = window.localStorage.getItem('title'+index);

        var text = window.localStorage.getItem('ta'+index);

        var point = new BMap.Point(y, x);

        map.centerAndZoom(point,);

        map.enableScrollWheelZoom();

        var marker1 = new BMap.Marker(point);

        map.addOverlay(marker1);

        var opts = {

          width : ,     // 信息窗口宽度

          height: ,     // 信息窗口高度

          title : title  // 信息窗口标题

        }

        var infoWindow = new BMap.InfoWindow(text, opts);

        map.openInfoWindow(infoWindow,point);

    };

    oBox2_input.onclick = function(){

        startMove(oUl,{left : -aBox[].offsetWidth });

    };

};

    </script>

</head>

<body>

    <div id="div1">

        标题:<input type="text" /><br />

        内容:<textarea id="t1" style="height:300px; width:300px;"></textarea><br />

        <input type="button" value="保存本地" />

        <input type="button" value="同步服务器" />

        <input type="button" value="删除所有数据" />

        <input type="checkbox" />记录地图位置

    </div>

    <div id="div2">

        <ul id="ul1">

            <li class="box">

                <ul id="childUl"></ul>

            </li>

            <li class="box">

                <input type="button" value="后退" />

                <input style="float:right" type="button" value="前进" />

                <div></div>

                <div></div>

            </li>

            <li class="box">

                <input type="button" value="后退" />

                <div id="map"></div>

            </li>

        </ul>

    </div>

</body>

</html>

move.js文件下载：http://pan.baidu.com/s/1nvs3uGh

HTML5——行走日记的更多相关文章

微信小程序开发日记——高仿知乎日报（上）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉我将该 ...
HTML5笔记1——HTML5的发展史及标签的改变
记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9, ...
08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
精选9个值得学习的 HTML5 效果【附源码】
这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...
让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...
HTML5 Geolocation 构建基于地理位置的 Web 应用
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
html5游戏引擎phaser官方示例学习
首发:个人博客,更新&纠错&回复 phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里. 目前把官方的完整游戏示例看了一大半, brea ...
8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

随机推荐

NopCommerce适应多数据库方案
有时候一个项目需要连接多个数据库,以实现不同数据库的数据在同个项目的共享. 如果已经安装了nop,则需要在第二个数据库新建一个表,nop现在无法自动通过迁移来实现第二个或者更多数据库,所以这点需要我们 ...
【Android Demo】加载.gif格式图片
Android系统为了节省内存,一般不支持直接显示gif图片,即使你强制设置了,也只会显示图片的第一帧. 这个 Demo 是在网上看到的,是个思路,还是有些局限性,还是记录下,以后研究吧. 1.效果图 ...
org.springframework.web.context.ContextLoaderListen 报错解决办法
今天搭建SSH项目的时候出现了如下错误: 严重: Error configuring application listener of class org.springframework.web.con ...
linux强制用户下线
Linux系统为多用户多任务系统,因此允许多个用户登录到系统,有时候,我们需要强制某些用户下线. 前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图 [root@vm ...
WIN7系统自带截图工具SnippingTool
在无网络的情况下,无QQ情况下,如何截图?以及如何设置快捷键? 方法首先,我们在“开始”菜单最上面找到它,如图: 找不到也没关系 C:\Windows\system32\SnippingTool.e ...
java 15 - 9 集合框架之栈、队列、数组和链表
用bower命令创建项目
1,先安装bower,npm install -g bower 2,cd到项目文件夹下,安装项目所需要的依赖包,比如 npm install jquery;npm install bootstrap, ...
设置linux账号的有效时间
在linux系统中,默认创建的用户的有效期限都是永久的,但有时候,我们需要对某些用户的有效期限做个限定!比如:公司给客户开的ftp账号,用于客户下载新闻稿件的.这个账号是有时间限制的,因为是付费的.合 ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
iOS程序间调用
1.在被调用应用内的info.plist里面设置如下: 鼠标右击information property list ,然后从列表中选择URL types 右击 add row 添加一个对象(item) ...

HTML5——行走日记

HTML5——行走日记的更多相关文章

随机推荐

热门专题