国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<fieldset id="qso4g"><noscript id="qso4g"></noscript></fieldset>

<fieldset id="qso4g"></fieldset>

5個前端練手項目(html css js canvas)

2年前作者：言不及行yyds分類：Toy博客閱讀(54)違法舉報

這篇具有很好參考價值的文章主要介紹了5個前端練手項目(html css js canvas)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

?前言：

首先祝大家端午節(jié)快樂。本篇文章有5個練手項目
對于剛學(xué)完前端三劍客的你們。應(yīng)該是一個很好的實踐

前端練手項目,前端練手項目,css,css3,html

目錄

??.跑馬燈

1.1效果圖：

1.2思路解析

1.3源碼

??.彩虹愛心

2.1效果圖

2.2思路解析

2.3源碼

??.鬧鐘

3.1效果圖

3.2思路解析

3.3源碼

??.自制筆記本

4.1效果展示

4.2思路解析

4.3源碼

??.自定義寫字臺（也可自定義字的樣式）

5.1效果展示

?5.2思路解析

5.3源碼

1.跑馬燈

1.1效果圖：

前端練手項目,前端練手項目,css,css3,html

1.2思路解析

在這個項目中，在html中創(chuàng)立20個span標(biāo)簽

每個span標(biāo)簽設(shè)置style為--i:數(shù)字的樣式用于

在css中動態(tài)分配圓圈分幾份，transform: rotate(calc(18deg*var(--i)))

利用filter屬性結(jié)合關(guān)鍵幀動態(tài)切換顏色。同時設(shè)置每一個span標(biāo)簽進行

旋轉(zhuǎn)

1.3源碼

<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
main{
	display: flex;
    background-color: #2c3a47;
	/*用于設(shè)置圖像居中 */
	align-items: center;
	justify-content: center;
	width: 1920px;
	height: 1000px;
	animation: animate1 10s linear infinite;
	}
/* 用于設(shè)置動畫屬性 其中filter用于做利鏡其中的hue-rotate屬性讓圖像運用色相旋轉(zhuǎn)*/
@keyframes animate1 {
	0% {
		filter: hue-rotate(0deg);
		}
	100% {
		filter: hue-rotate(360deg);
			}
		}
main .cube {
		position: relative;
		height: 120px;
		width: 120px;
	    }
main .cube span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 用于設(shè)置一個圓圈被分成幾份 */
	transform: rotate(calc(18deg*var(--i)));
	}
	/* :before用于設(shè)置在給定的屬性之前添加效果 */
main .cube span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: aqua;
		box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;
animation: animate 2s linear infinite;
		animation-delay: calc(0.1s*var(--i));
		}
@keyframes animate {
	0% {
		transform: scale(1);
		}
	80%,
	100% {
	    transform: scale(0);
		}
	}
.loading{
		color:#fff;
		font-size: 20px;
		position: relative;
		top:100px;
		right:100px;
          }
@media (min-width:765px){ 
			
	}

</style>
</head>
<body>
<main>
<div class="cube">
	<span style="--i:1;"></span>
	<span style="--i:2;"></span>
    <span style="--i:3;"></span>
	<span style="--i:4;"></span>
	<span style="--i:5;"></span>
	<span style="--i:6;"></span>
	<span style="--i:7;"></span>
	<span style="--i:8;"></span>
	<span style="--i:9;"></span>
	<span style="--i:10;"></span>
	<span style="--i:11;"></span>
	<span style="--i:12;"></span>
	<span style="--i:13;"></span>
	<span style="--i:14;"></span>
	<span style="--i:15;"></span>
	<span style="--i:16;"></span>
	<span style="--i:17;"></span>
	<span style="--i:18;"></span>
	<span style="--i:19;"></span>
	<span style="--i:20;"></span>
</div>
<div class="loading">
    <p>loading</p>
</div>
</main>
</body>

2.彩虹愛心

2.1效果圖

前端練手項目,前端練手項目,css,css3,html

2.2思路解析

搭建基本的html結(jié)構(gòu)，采用的svg技術(shù)，

通過js動態(tài)改變顏色，以及動態(tài)實現(xiàn)切換圖形

2.3源碼

<svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice">
  
<defs>
    
<symbol  id="heart" viewBox="-69 -16 138 138">
    
<path d="M0,12
         C 50,-30 110,50  0,120
         C-110,50 -50,-30 0,12z"/>
    
</symbol>

</defs>

</svg>


const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"];
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";

let heartsRy = []

function useTheHeart(n){
  let use = document.createElementNS(SVG_NS, 'use');
  use.n = n;
  use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart');
  use.setAttributeNS(null, 'transform', `scale(${use.n})`);
  use.setAttributeNS(null, 'fill', colors[n%colors.length]);
  use.setAttributeNS(null, 'x', -69);
  use.setAttributeNS(null, 'y', -69);
  use.setAttributeNS(null, 'width', 138);
  use.setAttributeNS(null, 'height', 138);
  
  heartsRy.push(use)
  hearts.appendChild(use);
}

for(let n = 18; n >= 0; n--){useTheHeart(n)}

function Frame(){
  window.requestAnimationFrame(Frame);
  for(let i = 0; i < heartsRy.length; i++){
    if(heartsRy[i].n < 18){heartsRy[i].n +=.01
     }else{
     heartsRy[i].n = 0;
     hearts.appendChild(heartsRy[i])
    }
    heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`);
  }
}

Frame()

3.鬧鐘

3.1效果圖

前端練手項目,前端練手項目,css,css3,html

3.2思路解析

搭建基本的html結(jié)構(gòu)，動態(tài)得到實時的時，分，秒

通過Date()函數(shù)獲得。將得到的數(shù)字根據(jù)邏輯，綁定

給各div結(jié)構(gòu)，實行動態(tài)旋轉(zhuǎn)。點擊按鈕，改變背景顏色

3.3源碼

html：

<body>
  <button class="toggle">Dark mode</button>
 <div class="clock-container">
   <div class="clock">
     <div class="needle hour"></div>
     <div class="needle minute"></div>
     <div class="needle second"></div>
     <div class="center-point"></div>
   </div>
      <div class="time"></div>
      <div class="date"></div>
  </div>
</body>

css:

@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');

* {
  box-sizing: border-box;
}

:root {
  --primary-color: #000;
  --secondary-color: #fff;
}

html {
  transition: all 0.5s ease-in;
}

html.dark {
  --primary-color: #fff;
  --secondary-color: #333;
}

html.dark {
  background-color: #111;
  color: var(--primary-color);
}

body {
  font-family: 'Heebo', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.toggle {
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 0;
  border-radius: 4px;
  padding: 8px 12px;
  position: absolute;
  top: 100px;
}

.toggle:focus {
  outline: none;
}

.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
}

.needle {
  background-color: var(--primary-color);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 65px;
  width: 3px;
  transform-origin: bottom center;
  transition: all 0.5s ease-in;
}

.needle.hour {
  transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}

.needle.second {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
  background-color: #e74c3c;
}

.center-point {
  background-color: #e74c3c;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.center-point::after {
  content: '';
  background-color: var(--primary-color);
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.time {
  font-size: 60px;
}

.date {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.date .circle {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  transition: all 0.5s ease-in;
  font-size: 12px;
}

js:

const hourEl = document.querySelector('.hour')
const minuteEl = document.querySelector('.minute')
const secondEl = document.querySelector('.second')
const timeEl = document.querySelector('.time')
const dateEl = document.querySelector('.date')
const toggle = document.querySelector('.toggle')

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

toggle.addEventListener('click', (e) => {
    const html = document.querySelector('html')
    if (html.classList.contains('dark')) {
        html.classList.remove('dark')
        e.target.innerHTML = 'Dark mode'
    } else {
        html.classList.add('dark')
        e.target.innerHTML = 'Light mode'
    }
})

function setTime() {
    const time = new Date();
    const month = time.getMonth()
    const day = time.getDay()
    const date = time.getDate()
    const hours = time.getHours()
    const hoursForClock = hours >= 13 ? hours % 12 : hours;
    const minutes = time.getMinutes()
    const seconds = time.getSeconds()
    const ampm = hours >= 12 ? 'PM' : 'AM'

    hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
    minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
    secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`

    timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
    dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
}

// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

setTime()

setInterval(setTime, 1000)

4.自制筆記本

4.1效果展示

前端練手項目,前端練手項目,css,css3,html

4.2思路解析

通過js實現(xiàn)動態(tài)添加DOM結(jié)構(gòu)，綁定創(chuàng)建出DOM結(jié)構(gòu)的

添加，刪除按鈕。實現(xiàn)監(jiān)聽事件。實現(xiàn)動態(tài)改變DOM結(jié)構(gòu)

其他的就是設(shè)置css的相關(guān)屬性，

4.3源碼

html：

<link rel="stylesheet"  integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  </head>
  <body>
    <button class="add" id="add">
      <i class="fas fa-plus"></i> Add note
    </button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>

  </body>

?css：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
  outline: none;
}

body {
  background-color: #7bdaf3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}

.add {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: #9ec862;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.add:active {
  transform: scale(0.98);
}

.note {
  background-color: #fff;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  margin: 30px 20px;
  height: 400px;
  width: 400px;
  overflow-y: scroll;
}

.note .tools {
  background-color: #9ec862;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}

.note .tools button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.note textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  border: none;
  height: 400px;
  width: 100%;
  padding: 20px;
}

.main {
  padding: 20px;
}

.hidden {
  display: none;
}

js：

const addBtn = document.getElementById('add')

const notes = JSON.parse(localStorage.getItem('notes'))

if(notes) {
    notes.forEach(note => addNewNote(note))
}

addBtn.addEventListener('click', () => addNewNote())

function addNewNote(text = '') {
    const note = document.createElement('div')
    note.classList.add('note')

    note.innerHTML = `
    <div class="tools">
        <button class="edit"><i class="fas fa-edit"></i></button>
        <button class="delete"><i class="fas fa-trash-alt"></i></button>
    </div>

    <div class="main ${text ? "" : "hidden"}"></div>
    <textarea class="${text ? "hidden" : ""}"></textarea>
    `

    const editBtn = note.querySelector('.edit')
    const deleteBtn = note.querySelector('.delete')
    const main = note.querySelector('.main')
    const textArea = note.querySelector('textarea')

    textArea.value = text
    main.innerHTML = marked(text)

    deleteBtn.addEventListener('click', () => {
        note.remove()

        updateLS()
    })

    editBtn.addEventListener('click', () => {
        main.classList.toggle('hidden')
        textArea.classList.toggle('hidden')
    })

    textArea.addEventListener('input', (e) => {
        const { value } = e.target

        main.innerHTML = marked(value)

        updateLS()
    })

    document.body.appendChild(note)
}

function updateLS() {
    const notesText = document.querySelectorAll('textarea')

    const notes = []

    notesText.forEach(note => notes.push(note.value))

    localStorage.setItem('notes', JSON.stringify(notes))
}

5.自定義寫字臺（也可自定義字的樣式）

5.1效果展示

前端練手項目,前端練手項目,css,css3,html

?5.2思路解析

搭建html結(jié)構(gòu),創(chuàng)建canvas標(biāo)簽，

綁定設(shè)置的結(jié)構(gòu)比如+，-，顏色改變

動態(tài)設(shè)置并獲取他的值，然后將這些值動態(tài)的

設(shè)置為canvas語法中設(shè)置渲染的寬度，以及設(shè)置

顏色的屬性

5.3源碼

html:

<canvas id="canvas" width="800" height="700"></canvas>
 <div class="toolbox">
<button id="decrease">-</button>
 <span id="size">10</span>
 <button id="increase">+</button>
 <input type="color" id="color">
 <button id="clear">X</button>
</div>

css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

canvas {
  border: 2px solid steelblue;
}

.toolbox {
  background-color: steelblue;
  border: 1px solid slateblue;
  display: flex;
  width: 804px;
  padding: 1rem;
}

.toolbox > * {
  background-color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  height: 50px;
  width: 50px;
  margin: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;
}

.toolbox > *:last-child {
  margin-left: auto;
}

js:

const canvas = document.getElementById('canvas');
const increaseBtn = document.getElementById('increase');
const decreaseBtn = document.getElementById('decrease');
const sizeEL = document.getElementById('size');
const colorEl = document.getElementById('color');
const clearEl = document.getElementById('clear');

const ctx = canvas.getContext('2d');

let size = 10
let isPressed = false
colorEl.value = 'black'
let color = colorEl.value
let x
let y

canvas.addEventListener('mousedown', (e) => {
    isPressed = true

    x = e.offsetX
    y = e.offsetY
})

document.addEventListener('mouseup', (e) => {
    isPressed = false

    x = undefined
    y = undefined
})

canvas.addEventListener('mousemove', (e) => {
    if(isPressed) {
        const x2 = e.offsetX
        const y2 = e.offsetY

        drawCircle(x2, y2)
        drawLine(x, y, x2, y2)

        x = x2
        y = y2
    }
})

function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2)
    ctx.fillStyle = color
    ctx.fill()
}

function drawLine(x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.lineWidth = size * 2
    ctx.stroke()
}

function updateSizeOnScreen() {
    sizeEL.innerText = size
}

increaseBtn.addEventListener('click', () => {
    size += 5

    if(size > 50) {
        size = 50
    }

    updateSizeOnScreen()
})

decreaseBtn.addEventListener('click', () => {
    size -= 5

    if(size < 5) {
        size = 5
    }

    updateSizeOnScreen()
})

colorEl.addEventListener('change', (e) => color = e.target.value)

clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))

?在最后，如果覺得博主寫的還行，期待??點贊? ??評論 ??收藏

文章來源地址http://www.zghlxwxcb.cn/news/detail-784582.html

到了這里，關(guān)于5個前端練手項目(html css js canvas)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

h5(html5)+css3前端筆記二
一、表格標(biāo)簽表格的主要作用：表格主要用于顯示、展示數(shù)據(jù) ，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。 1. table/table 用來定義表格的標(biāo)簽
2024年02月14日
瀏覽(30)
【前端基礎(chǔ)篇】HTML5 + CSS3 入門知識
萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改（這是一項推薦標(biāo)準(zhǔn)、外語原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。 HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。 HTML5 簡
2024年02月09日
瀏覽(24)
前端 | （十一）CSS3簡介及基本語法（上） | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
學(xué)習(xí)來源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標(biāo)簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎(chǔ)及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(58)
HTML5+CSS3+JS小實例：暗紫色Tabbar
實例：暗紫色Tabbar 技術(shù)棧：HTML+CSS+JS 效果：源碼：【HTML】
2024年03月10日
瀏覽(39)
HTML5+CSS3+JS小實例：鼠標(biāo)滾輪水平滾動
實例：鼠標(biāo)滾輪水平滾動技術(shù)棧：HTML+CSS+JS 效果：源碼：【html】
2024年02月06日
瀏覽(28)
HTML5+CSS3+JS小實例：音頻可視化
實例：音頻可視化技術(shù)棧：HTML+CSS+JS 效果：源碼：【HTML】【CSS】
2024年01月18日
瀏覽(17)
HTML5+CSS3+JS小實例：過年3D煙花秀
實例：過年3D煙花秀技術(shù)棧：HTML+CSS+JS 效果：源碼：【HTML】【CSS】
2024年02月03日
瀏覽(33)
HTML5+CSS3+移動web 前端開發(fā)入門筆記（二）HTML標(biāo)簽詳解
排版標(biāo)簽用于對網(wǎng)頁內(nèi)容進行布局和樣式的調(diào)整。下面是對常見排版標(biāo)簽的詳細介紹：標(biāo)題使用至標(biāo)簽進行定義。定義最大的標(biāo)題，定義最小的標(biāo)題。具有align屬性，屬性值可以是：left、center、right。將給定的HTML代碼轉(zhuǎn)換為Markdown格式的標(biāo)題標(biāo)簽如下所示：效果演示： H3：
2024年02月07日
瀏覽(40)
前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
學(xué)習(xí)來源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標(biāo)簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎(chǔ)及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(29)
HTML5+CSS3+JS小實例：懸停滾動文字的導(dǎo)航欄
實例：懸停滾動文字的導(dǎo)航欄技術(shù)棧：HTML+CSS+JS 效果：源碼：【html】
2024年02月11日
瀏覽(25)

<fieldset id="ocgco"><kbd id="ocgco"></kbd></fieldset>

<tfoot id="ocgco"></tfoot>

<fieldset id="ocgco"><noscript id="ocgco"></noscript></fieldset>

<button id="ocgco"><noscript id="ocgco"></noscript></button>

<button id="ocgco"><noscript id="ocgco"></noscript></button>