2021年1月21日2021年1月21日

JS倒计时

样式

<style>
.countdown div{
float:left;
width: auto;
height: 50px;
background: #0c2345;
font-size: 60px;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: bold;
border-radius: 5px;
margin-right: 10px;
padding-left:20px;
padding-right:20px;
}
</style>

<style>

.countdown div{

float:left;

width: auto;

height: 50px;

background: #0c2345;

font-size: 60px;

color: #fff;

line-height: 50px;

text-align: center;

font-weight: bold;

border-radius: 5px;

margin-right: 10px;

padding-left:20px;

padding-right:20px;

}

</style>

HTML

<div class = "countdown">
  <div id="day">00</div>
  <div id="hours">00</div>
  <div id="minutes">00</div>
  <div>分</div>
  <div id="seconds">00</div>
  <div>秒</div>
</div>

</div>

JS代码

<script>
				var countDownTime = {
					init: function(a, b, c, d, e) {
						this.t = a, this.d = b, this.h = c, this.m = d, this.s = e
					},
					start: function() {
						var a = this;
						setInterval(a.timer, 1e3)
					},
					timer: function(a) {
						var b, c, d, e, f, g, h;
						a = this.countDownTime, b = new Date, c = new Date(a.t), d = c.getTime() - b.getTime(), e = Math.floor(a.formatTime(d, "day")), f = Math.floor(a.formatTime(d, "hours")), g = Math.floor(a.formatTime(d, "minutes")), h = Math.floor(a.formatTime(d, "seconds")), a.d && (a.d.innerText = a.formatNumber(e)), a.h && (a.h.innerText = a.formatNumber(f)), a.m && (a.m.innerText = a.formatNumber(g)), a.s && (a.s.innerText = a.formatNumber(h))
					},
					formatNumber: function(a) {
						if(a<=0){a=0}
							return a = a.toString(), a[1] ? a : "0" + a
					},
					formatTime: function(a, b) {
						switch (b) {
							case "day":
								return a / 1e3 / 60 / 60 / 24;
							case "hours":
								return a / 1e3 / 60 / 60 % 24;
							case "minutes":
								return a / 1e3 / 60 % 60;
							case "seconds":
								return a / 1e3 % 60
						}
					}
				};
				var	day = document.getElementById('day');
				var	hours = document.getElementById('hours');
				var	minutes = document.getElementById('minutes');
				var seconds = document.getElementById('seconds');
				// 日 时 分 秒的dom对象
				countDownTime.init('2021/01/21 14:20:00', day, hours, minutes, seconds);
				countDownTime.start();
			</script>

var countDownTime = {

init: function(a, b, c, d, e) {

this.t = a, this.d = b, this.h = c, this.m = d, this.s = e

start: function() {

var a = this;

setInterval(a.timer, 1e3)

timer: function(a) {

var b, c, d, e, f, g, h;

a = this.countDownTime, b = new Date, c = new Date(a.t), d = c.getTime() - b.getTime(), e = Math.floor(a.formatTime(d, "day")), f = Math.floor(a.formatTime(d, "hours")), g = Math.floor(a.formatTime(d, "minutes")), h = Math.floor(a.formatTime(d, "seconds")), a.d && (a.d.innerText = a.formatNumber(e)), a.h && (a.h.innerText = a.formatNumber(f)), a.m && (a.m.innerText = a.formatNumber(g)), a.s && (a.s.innerText = a.formatNumber(h))

formatNumber: function(a) {

if(a<=0){a=0}

return a = a.toString(), a[1] ? a : "0" + a

formatTime: function(a, b) {

switch (b) {

case "day":

return a / 1e3 / 60 / 60 / 24;

case "hours":

return a / 1e3 / 60 / 60 % 24;

case "minutes":

return a / 1e3 / 60 % 60;

case "seconds":

return a / 1e3 % 60

}

};

var day = document.getElementById('day');

var hours = document.getElementById('hours');

var minutes = document.getElementById('minutes');

var seconds = document.getElementById('seconds');

// 日时分秒的dom对象

countDownTime.init('2021/01/21 14:20:00', day, hours, minutes, seconds);

countDownTime.start();

</script>

2021年1月12日2021年1月12日

javascript限制input输入小数并保持小数点后两位

限制input框只能输入小数并保持小数点后两位 read more »

2020年11月13日

angular的Directive指令中input值改变后更新

解决方法很简单，我们需要在Directive中更新更新我们的值，就要用到implements OnChanges。并在ngOnChanges方法中实现@HostBinding值的变化 read more »

2020年11月12日

angular中嵌入百度地图

很简单

在index.html中加入百度地图api链接并填写你的密钥 read more »

2020年10月27日2020年10月27日

用angular代理方式解决开发中跨域问题

创建一个代理的配置文件，在根目录即可 proxy.conf.json

{
    "/api": {
        "target": "http://www.xxxx.local", 
        "secure": false,  
        "changeOrigin": true,  //不是localhost就要用
        "pathRewrite": {"^/api": ""},   //路径重写，去掉api
        "logLevel": "debug"   //debug日志
    }
}

{

"/api": {

"target": "http://www.xxxx.local",

"secure": false,

"changeOrigin": true, //不是localhost就要用

"pathRewrite": {"^/api": ""}, //路径重写，去掉api

"logLevel": "debug" //debug日志

}

2020年10月27日2020年10月27日

解决angular10的POST提交后端接收不到的问题

其实方法很简单，就是使用一个FormData就可以了，其他的都不用配置

  login(username:string,password:string){
    var formData: any = new FormData();
    formData.append("login_username", username);
    formData.append("login_password", password);
    return this.http.post(this.apiurl, formData);
  }

var formData: any = new FormData();

formData.append("login_username", username);

formData.append("login_password", password);

return this.http.post(this.apiurl, formData);

}

2020年10月23日

Angular项目部署到服务器上刷新404解决办法

配置app.module.ts

import {HashLocationStrategy , LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp],
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
});

import {HashLocationStrategy , LocationStrategy} from '@angular/common';

@NgModule({

declarations: [AppCmp],

bootstrap: [AppCmp],

imports: [BrowserModule, routes],

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

});

主要添加的代码：

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

这样设置后，访问angular站点，会自动在根节点后面加一个#锚点。再次刷新便不会报404错误了。

2020年10月22日2020年10月22日

angular10从对象集合中获取一条数据

我们有一个新闻列表页面，里面每条是这样的

      <a  class="weui-media-box weui-media-box_appmsg"  routerLink="/news_detail" [queryParams]="{id:item.id}"  *ngFor="let item of newsservice.newslist">

1	<a class="weui-media-box weui-media-box_appmsg" routerLink="/news_detail" [queryParams]="{id:item.id}" *ngFor="let item of newsservice.newslist">

newsservice.newslist 是有多个news对象的集合

routerLink=”/news_detail” [queryParams]=”{id:item.id}” 跳转到详情页，并传入这条新闻的id

2020年10月21日2020年10月22日

angular10获取json数据并转为Model实体对象集合

我们有时希望像后端语言一样，让angular获取的网络json能够转化为一个数据entity的实体对象集合。 read more »

2020年10月20日2020年10月20日

angular10打包程序并部署到子目录

打包

angular10打包程序我们使用命令

ng build --prod --aot

1	ng build --prod --aot

aot是angular的一种编译机制

编译完成后，他会把文件生成到

\dist 目录下

1 / 8 12 3 4 5...下一页尾页