当前位置： 首页 > news >正文

前端小功能开发过程小结

news 来源：原创 2024/5/2 23:56:38

 

做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。
有两种办法，一种纯css实现，一种借助js实现。
JS:

<body onload="load()">  
    <select id="abc" >          
        <option >1</option>      
        <option >2</option>          
        <option >3</option>          
        <option >4</option>       
    </select>  
</body>

控制用的js:

    <script type="text/javascript">
        function load() {
            var x = document.getElementById("abc");
            x.selectedIndex = -1;
        }
    </script>


纯css的方法：

<option style="display:none" value="" selected></option>

http://blog.csdn.net/wzj2584454/article/details/60874919

js格式化日期。有一点不是很理解，jquery为什么没有集成类似java的SimpleDateFormatter,或者

org.apache.commons.lang3.time.DateFormatUtils#format(java.util.Date, java.lang.String)   
  /**
     * <p>Formats a date/time into a specific pattern.</p>
     *
     * @param date  the date to format, not null
     * @param pattern  the pattern to use to format the date, not null
     * @return the formatted date
     */
    public static String format(final Date date, final String pattern) {
        return format(date, pattern, null, null);
    }

 

<script type="text/javascript">
    function formatDateToYYYY_MM_DD(currentDate) {
        return currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate()
    }
    function formatDateToYYYY_MM_DD_HH_MIN(currentDate) {
        return currentDate.getFullYear() + '-'
                + (currentDate.getMonth() + 1)
                + '-' + currentDate.getDate()
                + " " + currentDate.getHours()
                + ":" + currentDate.getMinutes();
    }
</script>

 

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.6</version>
</dependency>

 

You can: .slice() and .split()

<script type="text/javascript">
    var d = "2010-10-30T00:00:00+05:30".slice(0, 10).split('-');
    console.log(d[1] + "/" + d[2] + "/" + d[0]);// 10/30/2010
</script>

...or pass your string into the Date Object:

    <script type="text/javascript">
        var d = new Date("2010-10-30T00:00:00+05:30");
        //from here you can extract the desired using the following methods:
        console.log(d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear());// 10/30/2010
    </script>

Note that getMonth() returns the month number zero based (0-11) therefore a +1 is needed. java.uti.Date中的month也是0-11

https://stackoverflow.com/questions/11591854/format-date-to-mm-dd-yyyy-in-javascript

jQuery时间戳转换普通日期格式：
找了下网上的都是会遇到少个0的时候，所以自己弄了个不会出现单位的jquery代码

    <script type="text/javascript">
        function add0(m) {
            return m < 10 ? '0' + m : m
        }
        function format(timestamp) {
            //timestamp是整数，否则要parseInt转换,不会出现少个0的情况

            var time = new Date(timestamp);
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var date = time.getDate();
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            return year + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds);
        }
    </script>

http://blog.csdn.net/dacheng_liu/article/details/52879975

时间和时间戳互转http://www.jb51.net/article/44849.htm

 

 

时间选择控件：
https://github.com/smalot/bootstrap-datetimepicker 【此次使用这个,is a fork】

bootstrap-datepicker
Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.

https://github.com/uxsolutions/bootstrap-datepicker

Requirements
Bootstrap 2.0.4+
jQuery 1.7.1+
These are the specific versions bootstrap-datepicker is tested against (js files) and built against (css files). Use other versions at your own risk.

Dependencies
Requires bootstrap’s dropdown component (dropdowns.less) for some styles, and bootstrap’s sprites (sprites.less and associated images) for arrows.

A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by running build/build_standalone.less through the lessc compiler:

$ lessc build/build_standalone.less datepicker.css
Usage
Call the datepicker via javascript:

$('.datepicker').datepicker();

https://bootstrap-datepicker.readthedocs.io/en/stable/


时间选择控件2
https://github.com/Eonasdan/bootstrap-datetimepicker

http://momentjs.com/

Moment.js 2.18.1
Parse, validate, manipulate, and display dates and times in JavaScript

bootstrap渲染的控件：
http://getbootstrap.com/components/#input-groups

bootstrap常用样式
http://getbootstrap.com/examples/theme/#

 

 

 

参考：

Java 8新增了LocalDate和LocalTime接口，为什么要搞一套全新的处理日期和时间的API？因为旧的java.util.Date实在是太难用了。

java.util.Date月份从0开始，一月是0，十二月是11，变态吧！java.time.LocalDate月份和星期都改成了enum，就不可能再用错了。

java.util.Date和SimpleDateFormatter都不是线程安全的，而LocalDate和LocalTime和最基本的String一样，是不变类型，不但线程安全，而且不能修改。

java.util.Date是一个“万能接口”，它包含日期、时间，还有毫秒数，如果你只想用java.util.Date存储日期，或者只存储时间，那么，只有你知道哪些部分的数据是有用的，哪些部分的数据是不能用的。在新的Java 8中，日期和时间被明确划分为LocalDate和LocalTime，LocalDate无法包含时间，LocalTime无法包含日期。当然，LocalDateTime才能同时包含日期和时间。

新接口更好用的原因是考虑到了日期时间的操作，经常发生往前推或往后推几天的情况。用java.util.Date配合Calendar要写好多代码，而且一般的开发人员还不一定能写对。

LocalDate

看看新的LocalDate怎么用：

// 取当前日期：
LocalDate today = LocalDate.now(); // -> 2014-12-24
// 根据年月日取日期，12月就是12：
LocalDate crischristmas = LocalDate.of(2014, 12, 25); // -> 2014-12-25 // 根据字符串取： LocalDate endOfFeb = LocalDate.parse("2014-02-28"); // 严格按照ISO yyyy-MM-dd验证，02写成2都不行，当然也有一个重载方法允许自己定义格式 LocalDate.parse("2014-02-29"); // 无效日期无法通过：DateTimeParseException: Invalid date

日期转换经常遇到，比如：

// 取本月第1天：
LocalDate firstDayOfThisMonth = today.with(TemporalAdjusters.firstDayOfMonth()); // 2014-12-01
// 取本月第2天：
LocalDate secondDayOfThisMonth = today.withDayOfMonth(2); // 2014-12-02 // 取本月最后一天，再也不用计算是28，29，30还是31： LocalDate lastDayOfThisMonth = today.with(TemporalAdjusters.lastDayOfMonth()); // 2014-12-31 // 取下一天： LocalDate firstDayOf2015 = lastDayOfThisMonth.plusDays(1); // 变成了2015-01-01 // 取2015年1月第一个周一，这个计算用Calendar要死掉很多脑细胞： LocalDate firstMondayOf2015 = LocalDate.parse("2015-01-01").with(TemporalAdjusters.firstInMonth(DayOfWeek.MONDAY)); // 2015-01-05

LocalTime

LocalTime只包含时间，以前用java.util.Date怎么才能只表示时间呢？答案是，假装忽略日期。

LocalTime包含毫秒：

LocalTime now = LocalTime.now(); // 11:09:09.240

你可能想清除毫秒数：

LocalTime now = LocalTime.now().withNano(0)); // 11:09:09

构造时间也很简单：

LocalTime zero = LocalTime.of(0, 0, 0); // 00:00:00 LocalTime mid = LocalTime.parse("12:00:00"); // 12:00:00

时间也是按照ISO格式识别，但可以识别以下3种格式：

  • 12:00
  • 12:01:02
  • 12:01:02.345

JDBC

最新JDBC映射将把数据库的日期类型和Java 8的新类型关联起来：

SQL -> Java
--------------------------
date -> LocalDate
time -> LocalTime
timestamp -> LocalDateTime

再也不会出现映射到java.util.Date其中日期或时间某些部分为0的情况了。

https://www.liaoxuefeng.com/article/00141939241051502ada88137694b62bfe844cd79e12c32000

 

Java 8中 java.util.Date 类新增了两个方法，分别是from(Instant instant)和toInstant()方法

// Obtains an instance of Date from an Instant object.
public static Date from(Instant instant) {
    try {
        return new Date(instant.toEpochMilli());
    } catch (ArithmeticException ex) {
        throw new IllegalArgumentException(ex);
    }
}

// Converts this Date object to an Instant.
public Instant toInstant() {
    return Instant.ofEpochMilli(getTime());
}

 

所谓的Instant类代表的是某个时间（有点象java.util.Date），它是精确到纳秒的（而不是象旧版本的Date精确到毫秒）。
如果使用纳秒去表示一个时间则原来的使用一位Long类型是不足够的，需要占用更多一点的存储空间，然而实际上其内部是由两个Long字段组成，
第一个部分保存的是自标准Java计算时代（就是1970年1月1日开始）到现在的秒数，
第二部分保存的是纳秒数（永远不会超过999,999,999）。

这两个方法使我们可以方便的实现将旧的日期类转换为新的日期类，具体思路都是

通过Instant当中介，然后通过Instant来创建LocalDateTime（这个类可以很容易获取LocalDate和LocalTime），
新的日期类转旧的也是如此，将新的先转成LocalDateTime，然后获取Instant，接着转成Date，具体实现细节如下：

    @Test
    public void testInstant() {
        //Instant类代表的是某个时间（有点象java.util.Date），它是精确到纳秒的（而不是象旧版本的Date精确到毫秒）
        // 其内部是由两个Long字段组成，
        // 第一个部分保存的是自标准Java计算时代（就是1970年1月1日开始）到现在的秒数，
        // 第二部分保存的是纳秒数（永远不会超过999,999,999）
        //以ISO-8601输出
        // 国际标准化组织的国际标准ISO 8601是日期和时间的表示方法，全称为《数据存储和交换形式·信息交换·日期和时间的表示方法》
        // 年为4位数，月为2位数，月中的日为2位数，例如2004年5月3日可写成2004-05-03或20040503。
        // 小时、分和秒都用2位数表示，对UTC时间最后加一个大写字母Z，其他时区用实际时间加时差表示。
        // 如UTC时间下午2点30分5秒表示为14:30:05Z或143005Z，
        // 当时的北京时间表示为22:30:05+08:00或223005+0800，也可以简化成223005+08。
        // 合并表示时，要在时间前面加一大写字母T，
        // 如要表示北京时间2004年5月3日下午5点30分8秒，可以写成2004-05-03T17:30:08+08:00或20040503T173008+08。
        Instant instant = Instant.now();
        System.out.println(instant);//2017-07-23T05:35:04.431Z
        //将java.util.Date转换为Instant
        Instant fromDate = Instant.ofEpochMilli(new Date().getTime());
        System.out.println(fromDate);//2017-07-25T05:42:33.897Z
        //从字符串类型中创建Instant类型的时间
        instant = Instant.parse("2017-07-23T10:12:35Z");
        System.out.println(instant);//2017-07-23T10:12:35Z


    }

    // 01. java.util.Date --> java.time.LocalDateTime
    @Test
    public void UDateToLocalDateTime() {
        Date date = new Date();
        System.out.println("date:" + date);
        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        System.out.println("localDateTime:" + localDateTime);
    }

    // 02. java.util.Date --> java.time.LocalDate
    @Test
    public void UDateToLocalDate() {
        Date date = new Date();
        System.out.println("date:" + date);
        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        LocalDate localDate = localDateTime.toLocalDate();
        System.out.println("localDate:" + localDate);
    }


    // 03. java.util.Date --> java.time.LocalTime
    @Test
    public void UDateToLocalTime() {
        Date date = new Date();
        System.out.println("date:" + date);

        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        LocalTime localTime = localDateTime.toLocalTime();
        System.out.println("localTime:" + localTime);
    }


    // 04. java.time.LocalDateTime --> java.util.Date
    @Test
    public void LocalDateTimeToUdate() {
        LocalDateTime localDateTime = LocalDateTime.now();
        System.out.println("localDateTime:" + localDateTime);

        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDateTime.atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);

    }


    // 05. java.time.LocalDate --> java.util.Date
    @Test
    public void LocalDateToUdate() {
        LocalDate localDate = LocalDate.now();
        System.out.println("localDate:" + localDate);

        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDate.atStartOfDay().atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);

    }

    // 06. java.time.LocalTime --> java.util.Date
    @Test
    public void LocalTimeToUdate() {
        LocalTime localTime = LocalTime.now();
        System.out.println("localTime:" + localTime);

        LocalDate localDate = LocalDate.now();
        System.out.println("localDate:" + localDate);

        LocalDateTime localDateTime = LocalDateTime.of(localDate, localTime);
        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDateTime.atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);
    }

 

相关文章：

  • centos 开启Telnet 服务
  • Linux双网卡绑定bond详解
  • 调试问题杂记
  • 微服务中的异步消息通讯
  • Jenkins使用教程之用户权限管理（包含插件的安装）
  • Lucene5学习之FunctionQuery功能查询
  • linux 系统函数之 （dirname, basename）【转】
  • [转] Java关键字final、static使用总结
  • thrift-TFileTransport
  • linux配置nfs步骤及心得
  • idea工具使用 修改resource无法立即生效 需要重启
  • 并查集专题: HDU1232畅通工程
  • 深入理解7816（3）-----关于T=0 【转】
  • 安装aix 6.1系统的完整教程，初学者都可以学会
  • iOS 颜色设置看我就够了
  • 深入了解以太坊
  • __proto__ 和 prototype的关系
  • 【comparator, comparable】小总结
  • js正则，这点儿就够用了
  • Lucene解析 - 基本概念
  • 给初学者：JavaScript 中数组操作注意点
  • 基于Volley网络库实现加载多种网络图片（包括GIF动态图片、圆形图片、普通图片）...
  • 开源SQL-on-Hadoop系统一览
  • 聊聊flink的BlobWriter
  • 聊聊redis的数据结构的应用
  • 自定义函数
  • 仓管云——企业云erp功能有哪些？
  • ​iOS实时查看App运行日志
  • ​油烟净化器电源安全，保障健康餐饮生活
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • （2）MFC+openGL单文档框架glFrame
  • （2022版）一套教程搞定k8s安装到实战 | RBAC
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • （二）【Jmeter】专栏实战项目靶场drupal部署
  • （附源码）springboot掌上博客系统 毕业设计063131
  • （免费领源码）python#django#mysql公交线路查询系统85021- 计算机毕业设计项目选题推荐
  • （十八）三元表达式和列表解析
  • （十六）Flask之蓝图
  • (四)docker：为mysql和java jar运行环境创建同一网络，容器互联
  • （一）eclipse Dynamic web project 工程目录以及文件路径问题
  • （一）插入排序
  • (转)Google的Objective-C编码规范
  • （转）linux 命令大全
  • (转)如何上传第三方jar包至Maven私服让maven项目可以使用第三方jar包
  • **PHP二维数组遍历时同时赋值
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • /etc/motd and /etc/issue
  • @RequestBody与@ResponseBody的使用
  • @Service注解让spring找到你的Service bean
  • [].shift.call( arguments ) 和 [].slice.call( arguments )
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [Android]竖直滑动选择器WheelView的实现
  • [Angularjs]ng-select和ng-options
  • [bzoj4240] 有趣的家庭菜园
  • [CSS]CSS 字体属性