vue+css实现夜间模式

JavaScript015

vue+css实现夜间模式,第1张

最近项目中要求实现夜间模式，整理一下实现方法。 ps. 我们的项目是混合开发，所以夜间模式要通过原生交互实现，如果直接是h5项目，则可省去原生交互这块。 step1 原生交互方法 step2  获取模式方法 step3 实现方法1、使用css大类区分 2、针对不同class类定义css属性全局变量 3、全局引入样式文件（main.js中引入） 4、页面中可定义css私有变量（包含页面中特殊的颜色属性，不止涉及亮度更改的图片）        变量定义规范：--（页面名称）-自定义         建议将白天与夜间模式图片区分两个文件夹存储5、变量使用规范总结： 1、注意css变量的使用的兼容性，例如安卓5的手机可能识别不了变量，解决方法：postcss可以试试看 2、如果项目中已使用less，可直接用less来实现，现未发现其兼容性问题（下一篇文章我会写less实现夜间模式）

提供一个思路：

利用js语句，在webView代理方法webViewDidFinishLoad：中实现下面的代码

#pragma mark - <UIWebViewDelegate>

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

// 改变网页内容背景颜色

[webView stringByEvaluatingJavaScriptFromString:@"document.body.style.backgroundColor=\"black\""]

// 改变网页内容文字颜色

[webView stringByEvaluatingJavaScriptFromString:@"document.body.style.webkitTextFillColor=\"gray\""]

}

根据模式切换，设置颜色就可以了

#pragma mark - <WKNavigationDelegate>

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

{

// 改变网页内容背景颜色

[webView evaluateJavaScript:@"document.body.style.backgroundColor=\"black\"" completionHandler:nil]

// 改变网页内容文字颜色

[webView evaluateJavaScript:@"document.body.style.webkitTextFillColor=\"gray\"" completionHandler:nil]

}

1. jquery的$.delay()方法

设置一个延时来推迟执行队列中之后的项目。这个方法不能取代JS原生的setTimeout。

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

例子：在.slideUp() 和 .fadeIn()之间延时800毫秒。

HTML 代码:

<div id="foo /">

jQuery 代码:

$('#foo').slideUp(300).delay(800).fadeIn(400)

2. 通过循环消耗cpu

function sleep(n) {

var start = new Date().getTime()

while(true) if(new Date().getTime()-start >n) break

}

3. 用setTimeout。

假设有三个步骤，步骤之间需要暂停一段时间；可以采用如下的方法：

function firstStep() {

//do something

setTimeout("secondStep()", 1000)

}

function secondStep() {

//do something

setTimeout("thirdStep()", 1000)

}

function thirdStep() {

//do something

}