小编pas*_*tgt的帖子

如何使用javascript从渐变百分比中获取颜色值?

我有一个固定的宽度div,使用css应用渐变.我想基于此渐变构建基于滑块的颜色选择器.

当我拖动滑块我计算百分比位置,我想得到基于此值的十六进制或rgb颜色代码.

我的想法是创建一个定义了开始/停止位置和颜色的数组,然后根据滑块位置从这个数组中找到两个值,然后以某种方式找到它之间的颜色:这是我无法前进的地方.

演示:http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});
Run Code Online (Sandbox Code Playgroud)

javascript css jquery colors linear-gradients

16
推荐指数
3
解决办法
1万
查看次数

IMG标记的CSS内容属性

img:after {
   content:attr(title);
}
Run Code Online (Sandbox Code Playgroud)

这不起作用,可能是因为img标记为空,没有结束标记.没有js修复此问题的任何解决方法?

css

11
推荐指数
1
解决办法
2348
查看次数

从谷歌地图中删除HeatmapLayer

我正在使用HeatmapLayer api https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

我像这样生成热图:

heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    radius: 50
});
heatmap.setMap(google_map);
Run Code Online (Sandbox Code Playgroud)

当我想使用与上面相同的功能显示另一个热图时(我正在使用ajax并且我有新标记要显示,所以我也需要更改热图)热图图层保留在地图上,在这种情况下我在我的地图上有2个重叠的热图.我怎样才能首先删除当前的热门播放器?

这是我的演示代码,如果你点击地图下方的链接,会添加热图,再次点击它,它应该删除它,但它只是一遍又一遍地重复:

http://jsfiddle.net/LpL3P/

jquery google-maps heatmap google-maps-api-3

9
推荐指数
2
解决办法
1万
查看次数

在Chrome中的页面上使用动画时出现奇怪的背景故障

如果我有一个动画元素后跟另一个非动画元素,Chrome中会出现条带效果和各种颜色转移错误.很难看,但我录制了一个视频(如果放大页面,颜色会发生变化,更容易看到):https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30 %20原子%2011.35%20PM.mov

header {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #263238;
 }
 
 header a {
  animation: scroll-down-anim 1s infinite;
 }

@keyframes scroll-down-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
Run Code Online (Sandbox Code Playgroud)
<header>
  <a href="#">Animated element</a>
 </header>
 <p>if i remove this, the glitch disappears</p>
Run Code Online (Sandbox Code Playgroud)

任何想法如何解决这一问题?如果我删除<p>元素,它的工作原理.也适用于任何其他浏览器,如Safari.

html css google-chrome css-animations

8
推荐指数
1
解决办法
596
查看次数

如何让 WidgetKit 上的现有条目保持刷新?

我正在HealthKit我的小部件中使用数据。如果手机被锁定,则无法获取HealthKit数据,除非手机解锁。但是,即使手机被锁定,我的小部件时间线也会尝试更新。

是否有可能以某种方式返回空完成,因此它将保持当前小部件数据不变?

这是我的代码:

struct Provider: IntentTimelineProvider {
    private let healthKitService = HealthKitService()
    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let currentDate = Date()
        let refreshDate = Calendar.current.date(byAdding: .minute, value: 5, to: currentDate)!
        
        healthKitService.getHeartRate() { data, error in
            
            //Create an empty entry
            var entry = SimpleEntry(date: currentDate, configuration: ConfigurationIntent(), data: nil)

            //If no errors, set data
            if(error == nil) {
                entry.data = data
            } else {
                print(error) //this runs when a …
Run Code Online (Sandbox Code Playgroud)

ios swift healthkit widgetkit swiftui

7
推荐指数
1
解决办法
1005
查看次数

在输入字段中选择文本,但禁用编辑

我有一个简单的txt输入字段:

<input type="text" name="" value="http://google.com" />

如果我在输入内部单击,我想选择文本.这部分很好用:

$( 'input.highlight').点击(函数(){

$(本).focus()选择().

返回false;

});

但是,我也想禁用编辑.如果我把假回报; 到keydown事件,ctrl + c不起作用.如果我将disabled ="disabled"设置为输入,则select不起作用.

任何的想法?谢谢.

jquery select input

6
推荐指数
1
解决办法
5079
查看次数

CSS3转换后的元素在firefox中不可见

我想用CSS3创建一个透视网球场.它在Webkit中看起来很棒,但在Firefox中,法院本身并不可见.这是相关代码:

HTML:

<div id="court-color">  
    <div class="court_outer">
        <div class="court"></div>
    </div>      
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

#court-color .court_outer {
    position: relative;
    width: 514px;
    height: 382px;
    background-color: #82b192;
    -webkit-perspective: 474px;
    -moz-perspective: 474px;
    -o-perspective: 474px;
    -ms-perspective: 474px;
    perspective: 474px;
    -webkit-perspective-origin: 50%, 50%;
    -moz-perspective-origin: 50%, 50%;
    -o-perspective-origin: 50%, 50%;
    -ms-perspective-origin: 50%, 50%;
    overflow: hidden;
}

#court-color .court {
    background-color: #4275b3;
    width: 36em;
    height: 78em;
    font-size: 10px;
    border: 0.5em solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -39.5em -18.5em;
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.47, 0) translate(0px, -6em); …
Run Code Online (Sandbox Code Playgroud)

css firefox transform css3 perspective

6
推荐指数
1
解决办法
1376
查看次数

使用JWT丢失授权标头

我正在尝试设置JSON Web令牌,以便从移动应用程序与我的php后端进行通信.我可以请求令牌就好了.当我需要验证它(或向另一个端点发出请求)时,我使用以下格式设置Authorization标头:

Bearer <token here>
Run Code Online (Sandbox Code Playgroud)

但由于某些原因,在我的后端,$_SERVER['HTTP_AUTHORIZATION']没有设置.

我在使用Mamp Pro和PHP7的本地主机上.这是我的$_SERVER数组的转储:

Array
(
    [SERVER_SOFTWARE] => Apache
    [REQUEST_URI] => /wp-json/jwt-auth/v1/token/validate/
    [REDIRECT_STATUS] => 200
    [HTTP_HOST] => localhost.dev
    [CONTENT_TYPE] => application/x-www-form-urlencoded
    [CONTENT_LENGTH] => 54
    [HTTP_CONNECTION] => keep-alive
    [HTTP_ACCEPT] => */*
    [HTTP_USER_AGENT] => CocoaRestClient/15 CFNetwork/760.2.6 Darwin/15.3.0 (x86_64)
    [HTTP_ACCEPT_LANGUAGE] => en-us
    [HTTP_ACCEPT_ENCODING] => gzip, deflate
    [PATH] => /usr/bin:/bin:/usr/sbin:/sbin
    [SERVER_SIGNATURE] => 
    [SERVER_NAME] => cloud.iblue.eu
    [SERVER_ADDR] => ::1
    [SERVER_PORT] => 80
    [REMOTE_ADDR] => ::1
    [DOCUMENT_ROOT] => /Applications/MAMP/htdocs/dev
    [SERVER_ADMIN] => you@example.com
    [SCRIPT_FILENAME] => /Applications/MAMP/htdocs/dev/index.php
    [REMOTE_PORT] => 51804 …
Run Code Online (Sandbox Code Playgroud)

php apache mamp jwt mamp-pro

5
推荐指数
1
解决办法
3320
查看次数

如何通过缓动增加javascript循环延迟

我需要从1到60计数,但我想要计算一个缓和,所以例如它将从1到30延迟100ms,之后我需要增加延迟,以便计数将逐渐减慢它达到60.这是我到目前为止(不多):

var i = 0;
var interval = setInterval(function(){
    i += 1;
    console.log(i);
    if(i == 60) {
        clearInterval(interval);
    }
}, 100);
Run Code Online (Sandbox Code Playgroud)

javascript jquery loops intervals easing

4
推荐指数
1
解决办法
1475
查看次数

如何在棘手的情况下禁用表格上的文本选择?

我有一个基本的表,像这样:

<table>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

在行上我有一个双击函数与jQuery:

$('tr').live('dblclick',function(){
    dosomething();
    return false;
});
Run Code Online (Sandbox Code Playgroud)

我还有一个名为tablednd的插件,它在行上使用mousedown/up函数.双击会导致单元格上的文本选择.

我怎么能阻止这个?

jquery html-table selection textselection

3
推荐指数
1
解决办法
6286
查看次数