两段代码 写进数据库 使用系统自带函数 报错
数据库字段格式是 {"js": "hij", "css": "efg", "html": "abc"}
构造json 两个系统自带函数都报错 Invalid JSON text: "Invalid escape character in string." at position 47 in value for column '***_code_snippets.code_content'.
$html_code=hRepPostStr($html_code,1,0); $css_code=hRepPostStr($css_code,1,0); $js_code=hRepPostStr($js_code,1,0); //$html_code=AddAddsData($html_code); //$css_code=AddAddsData($css_code); //$js_code=AddAddsData($js_code);
// 构造 code_content JSON $code_content = json_encode(array( 'html' => $html_code, 'css' => $css_code, 'js' => $js_code )); // 构造 code_content JSON $code_content = json_encode(array( 'html' => $html_content, 'css' => $css_content, 'js' => $js_content ));
<div class="container"> <div class="progress"> <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span> <div class="overlay"></div> <div class="left"></div> <div class="right"></div> </div> <div class="progress"> <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span> <div class="overlay"></div> <div class="left"></div> <div class="right"></div> </div> <div class="progress"> <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span> <div class="overlay"></div> <div class="left"></div> <div class="right"></div> </div> <div class="progress"> <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span> <div class="overlay"></div> <div class="left"></div> <div class="right"></div> </div> </div>
* { box-sizing: border-box; padding: 0; margin: 0; }
.container { display: flex; justify-content: space-around; flex-wrap: wrap; background-color: lightblue; height: 100vh; align-items: center;
}
.progress { width: 200px; height: 200px; font-size: 30px; color: #fff; border-radius: 50%; overflow: hidden; position: relative; background: #07070c; text-align: center; line-height: 200px; margin: 20px; box-shadow: 2px 2px 2px 2px white; }
.progress::after { content: "%"; }
.progress .title { position: relative; z-index: 100; }
.progress .overlay { width: 50%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: #07070c; }
.progress .left, .progress .right { width: 50%; height: 100%; position: absolute; top: 0; left: 0; border: 10px solid gray; border-radius: 100px 0px 0px 100px; border-right: 0; transform-origin: right; }
.progress .left { animation: load1 1s linear forwards; }
.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right { animation: load2 0.5s linear forwards 1s; }
.progress:last-of-type .right, .progress:first-of-type .right { animation: load3 0.8s linear forwards 1s; }
@keyframes load1 { 0% { transform: rotate(0deg); }
100% { transform: rotate(180deg); } }
@keyframes load2 { 0% { z-index: 100; transform: rotate(180deg); }
100% { z-index: 100; transform: rotate(270deg); } }
@keyframes load3 { 0% { z-index: 100; transform: rotate(180deg); }
100% { z-index: 100; transform: rotate(315deg); } }
|