JSDM

HTML

 
1
<div class="thermometer--very-low">
2
  <span>You are<strong></strong></span>
3
  <div class="glass">
4
    <div class="liquid"></div>
5
    <svg class="ruler">
6
      <rect x="0px" y="0" width="20%" height="100%" fill="url(#ticks--very-low)"  rx="2"/>
7
      <rect x="20%" y="0" width="20%" height="100%" fill="url(#ticks--low)"  rx="2"/>
8
      <rect x="40%" y="0" width="20%" height="100%" fill="url(#ticks--moderate)"  rx="2"/>
9
      <rect x="60%" y="0" width="20%" height="100%" fill="url(#ticks--high)"  rx="2"/>
10
      <rect x="80%" y="0" width="20%" height="100%" fill="url(#ticks--very-high)"  rx="2"/>
11
      <defs>
12
        <pattern id="ticks--very-low" class="ticks--very-low" width="60px" height="100%" patternUnits="userSpaceOnUse" x="0">
13
          <line x1="1px" x2="1px" y2="6px" />
14
          <line x1="12px" x2="12px" y2="6px" />
15
          <line x1="24px" x2="24px" y2="6px" />    
16
          <line x1="36px" x2="36px" y2="6px" />
17
          <line x1="48px" x2="48px" y2="10px" />
18
        </pattern>
19
        <pattern id="ticks--low" class="ticks--low" width="60px" height="100%" patternUnits="userSpaceOnUse" x="0">
20
          <line x1="1px" x2="1px" y2="6px" />
21
          <line x1="12px" x2="12px" y2="6px" />
22
          <line x1="24px" x2="24px" y2="6px" />    
23
          <line x1="36px" x2="36px" y2="6px" />
24
          <line x1="48px" x2="48px" y2="10px" />
25
        </pattern>
26
        <pattern id="ticks--moderate" class="ticks--moderate" width="60px" height="100%" patternUnits="userSpaceOnUse" x="0">
27
          <line x1="1px" x2="1px" y2="6px" />
28
          <line x1="12px" x2="12px" y2="6px" />
29
          <line x1="24px" x2="24px" y2="6px" />    
30
          <line x1="36px" x2="36px" y2="6px" />
31
          <line x1="48px" x2="48px" y2="10px" />
32
        </pattern>
33
        <pattern id="ticks--high" class="ticks--high" width="60px" height="100%" patternUnits="userSpaceOnUse" x="0">
34
          <line x1="1px" x2="1px" y2="6px" />
35
          <line x1="12px" x2="12px" y2="6px" />
36
          <line x1="24px" x2="24px" y2="6px" />    
37
          <line x1="36px" x2="36px" y2="6px" />
38
          <line x1="48px" x2="48px" y2="10px" />
39
        </pattern>
40
        <pattern id="ticks--very-high" class="ticks--very-high" width="60px" height="100%" patternUnits="userSpaceOnUse" x="0">
41
          <line x1="1px" x2="1px" y2="6px" />
42
          <line x1="12px" x2="12px" y2="6px" />
43
          <line x1="24px" x2="24px" y2="6px" />    
44
          <line x1="36px" x2="36px" y2="6px" />
45
          <line x1="48px" x2="48px" y2="10px" />
46
        </pattern>
47
      </defs>
48
    </svg>
49
  </div>
50
</div>
!

CSS

​x
 
1
$low: #B8E1F2;
2
$veryLow: #249AA7;
3
$moderate: #ABD25E;
4
$high: #F8C830;
5
$veryHigh: #F1594A;
6
​
7
body {
8
  background: #454545;
9
}
10
.thermometer {
11
  max-width: 80%;
12
  margin: 2rem auto;
13
  span {
14
    font-family: Verdana;
15
    font-size: 1rem;
16
    color: #ccc;
17
    min-width: 100%;
18
    text-align: center;
19
    display: block;  
20
    margin-bottom: 1.25rem;
21
  }
22
  .liquid {
23
    display: block;
24
    width: 100%;
25
    height: 1.275rem;
26
    border: 1px solid darken(#ebebeb, 10);
27
    border-radius: 10px;
28
    margin: .25rem auto 0;
29
    position: relative;
30
    &:before {
31
      position: absolute;
32
      content: "";
33
      height: 70%;
34
      left: 3px;
35
      top: 14%;
36
      border-radius: 10px;
37
      transition: width .3s ease;
38
    }
39
  }
40
  .ruler {
41
    height: .625rem;
42
    width: 100%;
43
    margin-left: 2px;
44
    .ticks {
45
      &--very-low,
46
      &--low,
47
      &--moderate,
48
      &--high,
49
      &--very-high {
50
        line {
51
          stroke-width: 2px;
52
          shape-rendering:crispEdges  
53
        }
54
      }
55
      &--very-low { stroke: $veryLow; }
56
      &--low { stroke: $low; }
57
      &--moderate { stroke: $moderate; }
58
      &--high { stroke: $high; }
59
      &--very-high { stroke: $veryHigh; }
60
    }
61
  }
62
  &--very-low,
63
  &--low,
64
  &--moderate,
65
  &--high,
66
  &--very-high {
67
    @extend .thermometer;
68
  }    
69
​
70
  &--very-low {
71
    strong {
72
      color: $veryLow;
73
      &:before { content: " freezing";}
74
    }
75
    .liquid:before {
76
      background: $veryLow;
77
      width: 10%;
78
    }
79
  }
80
81
  &--low {
82
    strong {
83
      color: $low;
84
      &:before { content: " cold";}
85
    }
86
    .liquid:before {
87
      background: $low;
88
      width: 30%;
89
    }
90
  }
91
92
  &--moderate {
93
    strong {
94
      color: $moderate;
95
      &:before { content: " ok";}
96
    }
97
    .liquid:before {
98
      background: $moderate;
99
      width: 50%;
100
    }
101
  }
102
​
103
  &--high {
104
    strong {
105
      color: $high;
106
      &:before { content: " hot";}
107
    }
108
    .liquid:before {
109
      background: $high;
110
      width: 70%;
111
    }
112
  }
113
​
114
  &--very-high {
115
    strong {
116
      color: $veryHigh;
117
      &:before { content: " blazing";}
118
    }
119
    .liquid:before {
120
      background: $veryHigh;
121
      width: 99%;
122
    }
123
  }
124
125
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
6
 
1
var perfis = ['very-low', 'low', 'moderate', 'high', 'very-high'];
2
​
3
setInterval(function() {
4
  var random = perfis[Math.floor(Math.random() * perfis.length)];
5
  $('div[class^=thermometer]').removeClass().addClass('thermometer--'+random);
6
}, 3500);
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................