Os requisitos são os seguintes:
1. Exiba os nomes de todas as pessoas da classe na página da web.
2. Clique no botão Iniciar e a cor da pessoa começa a mudar. Quando parar, haverá uma posição com cores diferentes, e essa posição é o aluno que é clicado.
A interface gráfica aproximada é a seguinte:
A seguir, é apresentada uma análise específica da análise de requisitos acima da seguinte maneira:
1. Inicialize essa página e defina uma cor unificada.
um. O nome do aluno é armazenado em uma matriz
b. Exibi -lo no bloco div na página
2. Selecione aleatoriamente uma posição para alterar sua cor para -Red
um. Use o estilo CSS para controlar as mudanças de cor
b. As posições aleatórias são geradas usando funções aleatórias
3. Para torná -lo efeito animado, defina o tempo de intervalo para mover a posição de sua cor de cor para trás. E restaure a cor da posição anterior para verde.
um. Você precisa projetar um método para alterar a cor da div. Ao mesmo tempo, você deve chamar um método chamado tempo de intervalo. Depois, há o setTimeout e o método setInterval para escolher no JS.
4. O efeito da animação deve parar dentro do tempo especificado e a posição de parada ainda está vermelha.
um. O efeito de animação para dentro do tempo especificado, que na verdade está interrompendo o método acima. Use métodos diferentes em JS, com diferentes formulários de implementação
5. Quando para em uma determinada posição, uma caixa de diálogo aparece mostrando quem é o aluno selecionado.
um. O resultado final da função de alerta aparece está ok
Na próxima seção, este pequeno aplicativo será implementado no código JavaScript.